reducer-pipe
reducer-pipe
helps you to pipe redux
reducers with given state and action, passing previously returned state to next reducer, then keep last updated state.
Getting started
Install reducer-pipe
using npm:
npm install reducer-pipe --save
Then using ES6
;; increment decrement;
Using ES5
var myReducers = ;var reducerPipe = ; moduleexports = ;
Usage
You can rewrite this:
const reducer = { if !state state = initialState; }; ; //=> {counter: 1}
To this:
; const reducer = ; ; //=> {counter: 1}
See also
reducer-chain
in order to chain given reducers with same given state and action.
Examples
Explanation
Take this code:
const reducer = ;
When we call:
; // default compare set to `reducerPipe.compare.withInitial`
It will execute:
// We pass given state and action to our first reducer in list, which is `initial` //=> returns initial state {counter: 0} //=> Previous state is null, returns {counter: 0} // now we will pass previously returned state by compare //=> Increment counter by 1, returns {counter: 1} //=> Current state differs from previous, returns {counter: 1} // now we will pass previously returned state by compare //=> Nothing happens, returns given state {counter: 1} //=> Both state are the same object, returns {counter: 1}
Pipe:
updatedState newState newState updatedState updatedState updatedState updatedState
Chain:
updatedState newState updatedState state newState updatedState updatedState
Compare signature
nextState
initialState
is corresponding to the state passed to the high order reducer.previousState
is corresponding to the previously returned state. Defaults toinitialState
.currentState
is corresponding to the state returned by the reducer at the current index in the list.nextState
is corresponding to the state you want to keep.initialize
will be called everytime once with the given state from the high order reducer. It must returns an iterator function for comparing previous and current state, and return the prefered one.iterator
will be called on each reducer result (passed ascurrentState
). It must compare withpreviousState
(defaults toinitialState
) and return the state you want to keep next.
Note: Please note that initiaze
is called before calling any reducer.
Then reducer are called one by one in given order, and iterator
is called after each reducer
.
Available compare functions
reducer-pipe
built in with 4 different compare functions available under reducerPipe.compare
:
Name | Signature | Equals |
---|---|---|
withInitial (default) |
(initialState) => (previousState, currentState) => nextState |
R.equals(initialState, currentState) |
withInitialCustomEquals |
(customEquals) => (initialState) => (previousState, currentState) => nextState |
customEquals(initialState, currentState) |
withPrevious |
(initialState) => (previousState, currentState) => nextState |
R.equals(previousState, currentState) |
withPreviousCustomEquals |
(customEquals) => (initialState) => (previousState, currentState) => nextState |
customEquals(previousState, currentState) |
Compare usage
With immutable
:
// ./immutableReducerPipe.js;; reducerPipecompare;
// ./index.js;;; const initialState = Immutable; state ? state : initialState reducer1 reducer2;
With custom compare:
;; const customCompare = currentState !== null && currentState !== initialState ? currentState : previousState; const initialState = Object; customCompare state ? state : initialState reducer1 reducer2;
Links
renum
is a small library to create enum using frozen objects in javascript from multiple sources.reducer-chain
helps you to chainredux
reducers with given state and action, then keep last updated state.reducer-sandbox
helps you to reuse your reducers in different place without conflict them.