score:3

Accepted answer

The culprit can be found in your reducer, specifically these lines:

state.id = state.id + 1;
state.list.push(state.id);

The reducer here is both mutating the state, and returning a new state. Mutating the state is bad practice, and can cause weird effects (like the one you're experiencing)

So the '2. has added once' test will increment the id to 0. This will stay in memory during the next test where initialStatus will have an id of 0, not -1. In our reducer, state points to initialStatus. So calling state.id = status.id + 1; increments initialStatus's id field, and same for list. This is why it appears that the ADD action being called three times.

Moving away from mutations in the reducer can help fix this problem.

case "ADD": {
    const newId = state.id + 1;

    return {
      id: newId,
      list: state.list.concat([newId])
    };
}

Remember, never mutate the state in a reducer, always return the new state instead! (http://redux.js.org/docs/Troubleshooting.html#never-mutate-reducer-arguments)


Related Query

More Query from same tag