TIL... Combine Reducers also splits state...

2018-05-15 This post is over 2 years old

While starting work on a greenfield project, I was of course writing new reducers. This time, we were trying to follow a better paradigm as outlined here. As it happens I was writing the byId reducer for an action when I learned a wonderful, simplifying fact. As you know Reducers take current state and an action, returning a modified state. But what is the state handed to the function? As it turns out, CombineReducers, also splits out the relevant part of state for the given reducers. For example, take the following Redux State:

1
2
3
4
5
6
7
8
9
10
11
root: {
entities: {
item: {
byId:{},
allIds:[]
},
thing: {},
box: {},
},
uiState:{}
}

If you compose root from an entities and uiState reducer, then the entities reducer gets only the entities part of state. Going deeper you can similarly compose the entities reducer from item, thing and box. The item reducer will only get the item part of state, and will not see anything related to thing or box. As a result of this behavior, you can write very simple reducers. And of course it is super easy to write tests for reducers composed in this manner.