Reducer Composition

A theoretical view of how each reducer is assigned to a single component of the state object. The use of multiple reducers is known as Reducer Composition.

In all the apps we’ve create so far, we have used just one reducer to manage the entire state of the applications.

What’s the implication of this?

It is like having just one Cashier in the entire bank hall. How scalable is that?

Even if the Cashier can do all the work effectively, it may be more manageable (and perhaps a better customer experience) to have more than one Cashier in the bank hall.

Someone’s got to attend to everybody, and it’s a lot of work for just one person! The same goes with your Redux applications.

It is common to have multiple reducers in your application as opposed to one reducer handling all the operations of the state. These reducers are then combined into one.

For example, there could be 5 or 10 Cashiers in the bank hall, but all of them combined all serve one purpose. That’s how this works as well.

Consider the state object of the Hello World app we built earlier.

{
    tech: "React"
}

Pretty simple.

All we did was have ONE reducer manage the entire state updates.

Get hands-on with 1400+ tech skills courses.