Learning Redux
上QQ阅读APP看书,第一时间看更新

Testing out the full reducer

After combining our reducers, we can test them out by calling the appReducer:

First, we will initialize the reducers by passing an undefined state:

let state = appReducer(undefined, { type: 'INIT_ACTION' })
console.log('initial state:', state)

The resulting initial state looks as follows:

{
"posts": [],
"filter": "all"
}

Then, we will dispatch some actions by manually passing the current state and the action object to the appReducer function. We will start with a createPost action:

state = appReducer(state, createPost('dan', 'test'))
console.log('state after createPost:', state)

The state now looks like this:

{
"posts": [
{
"user": "dan",
"text": "test"
}
],
"filter": "all"
}

Then, we will edit the text of that post:

state = appReducer(state, editPost(0, 'edited post'))
console.log('state after editPost:', state)

This results in only the first post (index 0) getting changed:

{
"posts": [
{
"user": "dan",
"text": "edited post"
}
],
"filter": "all"
}

Finally, we will set the filter, which does not affect the posts array at all:

state = appReducer(state, setFilter('none'))
console.log('state after setFilter:', state)

The final state is as follows:

{
"posts": [
{
"user": "dan",
"text": "edited post"
}
],
"filter": "none"
}