Reusing Reducer Logic in Redux
You’re using Redux to maintain the state of a counter in your web application, and it’s great! Well, what if you need two counters, or three, or ten, or a variable number?
Here’s a simple higher order reducer (aka utility function) that can help you reuse the counter
reducer for managing the state of multiple counters:
To use it, simply wrap a reducer with makeMultiReducer
, and dispatch actions with a key
property. To access the state, create a selector using makeMultiGetter
. Here’s an example:
Two extra lines of code is all it takes go from counter
to counters
! makeMultiReducer
works with any reducer, big or small, even ones created using combineReducers
.
NOTE: makeMultiReducer
is part of an open-source library called dextrous
, which contains several other utility functions I use for reducing boilerplate and reusing reducer logic in Redux.