Reusing Reducer Logic in Redux

Aakash N S
1 min readApr 3, 2018

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.