React and Redux: Uncaught Error: A state mutation was detected between dispatches
@DDS pointed me in the right direction (thanks!) in that it was mutation elsewhere that was causing the problem.
ManageUserPage
is the top-level component in the DOM, but a different component on another route called UsersPage
, was mutating state in its render method.
Initially the render method looked like this:
render() {
const users = this.props.users.sort(alphaSort);
return (
<div>
<h1>Users</h1>
<input type="submit"
value="Add User"
className="btn btn-primary"
onClick={this.redirectToAddUserPage}/>
<UserList
users={users}/>
</div>
);
}
I changed the users
assignment to the following and the issue was resolved:
const users = [...this.props.users].sort(alphaSort);
The problem isn't in this component or the reducer. It's probably in the parent component, where you're probably assigning users[ix] = savedUser
somewhere, and the users array is ultimately the same array as the one in the state.