guys. I've been learning redux and there is something about reducers that I haven't been able to fully comprehend.
In redux docs, a simple example is provided. In the reducers of said example, there is one reducer that calls another reducer. This is the code for these reducers:
function posts(state = {
isFetching: false,
didInvalidate: false,
items: []
}, action) {
switch (action.type) {
case INVALIDATE_SUBREDDIT:
return Object.assign({}, state, {
didInvalidate: true
})
case REQUEST_POSTS:
return Object.assign({}, state, {
isFetching: true,
didInvalidate: false
})
case RECEIVE_POSTS:
return Object.assign({}, state, {
isFetching: false,
didInvalidate: false,
items: action.posts,
lastUpdated: action.receivedAt
})
default:
return state
}
}
function postsBySubreddit(state = {}, action) {
switch (action.type) {
case INVALIDATE_SUBREDDIT:
case RECEIVE_POSTS:
case REQUEST_POSTS:
return Object.assign({}, state, {
[action.subreddit]: posts(state[action.subreddit], action)
})
default:
return state
}
}
As you can see, postsBySubreddit
calls posts
. I understand this; it's reducer composition.
What I don't understand is why the posts
reducer is being called only in the REQUEST_POSTS
case and not in the rest of them, yet it updates the state properly for the other cases.
My flawed logic tells me that in order for the postsBySubreddit
to work in all cases, it should employ the same mechanism in the RECEIVE_POSTS
and the INVALIDATE_SUBREDDIT
cases, as follows:
function postsBySubreddit(state = {}, action) {
switch (action.type) {
case INVALIDATE_SUBREDDIT:
return Object.assign({}, state, {
[action.subreddit]: posts(state[action.subreddit], action)
})
case RECEIVE_POSTS:
return Object.assign({}, state, {
[action.subreddit]: posts(state[action.subreddit], action)
})
case REQUEST_POSTS:
return Object.assign({}, state, {
[action.subreddit]: posts(state[action.subreddit], action)
})
default:
return state
}
}
What am I missing? Thanks in advance. P.D. The full source code for this example can be found here.