I'm getting started with pulling in Redux to a React application, but I'm having trouble understanding where exactly my 'master state design' is used.
For context, I'm thinking of the app state as a giant tree, and I have reducers that take care of little bits of the tree. I've put a bit of thought into how I want the state tree to be represented, and I have a variable initialState that is basically an Immutable.js object with a bunch of child objects that contain the various parts of my app state.
I've split up my reducers to map to these various parts of my app, but I'm having trouble understanding how the giant, master state tree is created. I get that each reducer takes in the whole state tree + action and returns a new state based on the action, but I don't understand where to place the 'initial state' if the state that comes in to a reducer is undefined.
In other words: is a single reducer supposed to be in charge of creating the whole state tree if it's originally undefined (and if so, where should that reducer live)? Or should any one reducer assign an undefined state argument to initialState variable?
If you're using combineReducers, you don't have to create the "root." The function returned bycombineReducers is itself a reducer, and it will automatically create the root of your state tree with a "branch" (property) for each of the reducers you passed in. Your reducers only need to worry about initializing their own branch with an initial state.
If you're not using combineReducers, I think each reducer should still only worry about the part of the state tree that it acts on. Moving that into a single "master" reducer would needlessly split up related code, making your app harder to reason about.
As illustrated in the examples in the official guide You can use a default value for the first argument of the reducer which will be your initial state.
function todoApp(state = initialState, action) {
switch (action.type) {
case SET_VISIBILITY_FILTER:
return Object.assign({}, state, {
visibilityFilter: action.filter
})
case ADD_TODO:
return Object.assign({}, state, {
todos: [
...state.todos,
{
text: action.text,
completed: false
}
]
})
default:
return state
}
}
This initial state can be a default value hard coded in the client code. Or it can be some data bootstrapped into the HTML page by the server. For example in an EJS template rendered in server you can have:
<script>
window.INITIAL_STATE = <%= JSON.stringify(initialState) %>
</script>