Reusing Reducer Logic

As an example, let's say that we want to track multiple counters in our application, named A, B, and C. We define our initial counter reducer, and we use to set up our state:

Unfortunately, this setup has a problem. Because combineReducers will call each slice reducer with the same action, dispatching will actually cause all three counter values to be incremented, not just one of them. We need some way to wrap the counter logic so that we can ensure that only the counter we care about is updated.

The two most common ways to specialize a reducer are to generate new action constants with a given prefix or suffix, or to attach additional info inside the action object. Here's what those might look like:

We should now be able to use either of these to generate our specialized counter reducers, and then dispatch actions that will affect the portion of the state that we care about:

You could even go as far as to make a generic filtering higher-order reducer:

These basic patterns allow you to do things like having multiple instances of a smart connected component within the UI, or reuse common logic for generic capabilities such as pagination or sorting.