Hi everybody,
I am currently learning Redux after gaining some React fundamental concepts, I am watching Learn Redux video series from Wes Bos, which is an amazing resource!
I have the next question, in that tutorial we have a store with:
Supposedly every "part" of the store should have a "reducer", so we have a "comments" reducer and a "posts" reducer, which are merged inside index reducer with combineReducers. Everything is okay until now, but here comes my question, each reducer receives a part of the state and it is precisely either the posts array, or the comments array. How do the reducers know which part of the state should they use? Where does this happen?
This is from Redux docs:
Note that each of these reducers is managing its own part of the global state. The state parameter is different for every reducer, and corresponds to the part of the state it manages.
Greetings!
Thank you for adding me, guys can you addicted to play online game then one single click here duck life two and play a without download and registration required on your pc tablet & mobile.
The answer to your question lies in how the reducer functions are generally defined, based on a couple of conventions; and how the
combineReducersfunction works. Let's assume the following structure for your state.Now when you write a reducer function, the first convention is that you would name it same as the
keyattribute of that part of the state which it would handle. So for thestate.postspart of the state, you will have apostsreducer, and forstate.commentspart of the state, you will have acommentsreducer.The second convention is that these reducer functions would only accept that part of the state as an argument (along with an action, of course); that they are supposed to change. Essentially, we are explicitly passing this part of the state to this reducer function, whenever we call it; it doesn’t know it by itself.
This is the reducer file for the
posts, from the Learn Redux repo:function posts(state = [], action) { switch (action.type) { case 'INCREMENT_LIKES' : const i = action.index; return [ ...state.slice(0, i), { ...state[i], likes: state[i].likes + 1 }, ...state.slice(i + 1) ]; default: return state; } }You see the
postsfunction, even though it says state; it is actually only managing thestate.postspart of the state. The initial/default state is an empty array.Now on to how the
combineReducersfunction works you should read this part of the Redux documentation in and out, to have a proper mental model on how everything works; but here is the gist; when you do this:// As all the reducers, and the corresponding parts of the state they handle... // ...have the same names... // ...we can use ES6's object short-hand notation, in the following way combineReducers({ posts, comments });…it is basically returning the complete state object after running the reducer functions on the corresponding parts of the state:
{ posts: posts(state.posts, action), comments: comments(state.comments, action) }Hope this helps! Let me know if you have further questions. 😃