novux
novux
lets you to write Redux code simpler & faster by using an opinionated reducer generator.
- less boilerplate: instead of having to write and maintain dozens of actions creators, simply change state using two actions,
update
orreset
. - less maintenance: reduce the number of tests you have to write to only focus on business logic — all reducer action creator tests are handled by
novux
- code faster: easily declare and describe state changes to make coding & collaboration easier, even as state changes become more complex
Installation
npm install novuxnpm run buildnpm run test
Get started
Create your reducers
; const initialStates = user: name: 'Michael' company: 'Nova Credit' ; const userReducer = ;
Dispatch actions
novux
lets you run Redux by handling only two actions: update
and reset
.
update
is used to update the state of a single reducer given an object.
reset
is used to reset the reducer to its initial state or reset specific keys to their initial values.
Both actions have the following signature:
actionName(reducerName, tag, options)
- actionName: how is the state being changed?
- reducerName: which reducer is being affected?
- tag: why is this change relevant?
- options: what values are affected?
Example:
; ; ; ; // dispatch is provided by redux: http://redux.js.org/docs/api/Store.html#dispatchaction
Use dot notation paths
When reseting state, you can also pass in paths in dot notation
; // if a path is defined in the initial state, it will be reset to its initial value// if a path is undefined in the initial state, `novux` will seek the longest sub path defined in the initial state and reset
Why a tag
Using the tag
string instead of an action name to define a state change lets you describe state changes programatically.
The tag is included in the updated state under the key _lastAction
, allowing you to keep track of what action last affected a specific reducer in your dev tools.
const consent = true;const username = user;;
Connecting the dots
novux
can help you declare increasingly complicated sets of state updates in simple and consistent ways.
const toggleConsent = { const username = user; ; if !consent ; };// this example makes use of redux-thunk to easily access dispatch and state