higher-order reducer to reset the redux state on certain actions
npm install --save redux-recycle
import recycleState from 'redux-recycle';
recycleState(reducer, [ARRAY_OF_ACTIONS])
recycleState(reducer, [ARRAY_OF_ACTIONS], initialState)
recycleState(reducer, [ARRAY_OF_ACTIONS], (state, action) => initialState)redux-recycle is a reducer enhancer (higher-order reducer), it provides the
recycleState function, which takes an existing reducer and an array of
actions that will reset the state. Optionally, you can also pass an initial
state to reset to. (defaults to calling your reducer with
@@redux-recycle/INIT and an undefined state, which will have the same effect
as the initial redux action)
Firstly, import redux-recycle:
// Redux utility functions
import { combineReducers } from 'redux';
// redux-recycle higher-order reducer
import recycleState from 'redux-recycle';Then, add recycleState to your reducer(s) like this:
combineReducers({
counter: recycleState(counter, [INCREMENT_COUNTER], 0)
})Now, once you click the increment button, the state will be reset to 0.
If you need more complex initialization logic, you can provide a reducer function as the last param. It will be called with the state and action to get the initial state.
// here you don't allow resetting counting 10 times
const resetCounter = (state, action) => {
return state > 10 ? state : 0
}
combineReducers({
counter: recycleState(counter, [RESET_COUNTERS], resetCounter)
})Have a read of the Implementing Undo History recipe in the Redux documents, which explains in detail how higher-order reducers work.
MIT, see LICENSE.md for more information.