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.

Tags:

Reactjs

Redux