title: React & Redux, Update state, Error: A state mutation was detected between dispatches
body: <p>The problem I'm having is in my save data round trip. </p>
  
  <p>The error: browser.js:34 Uncaught (in promise) Invariant Violation: A state mutation was detected between dispatches, in the path <code>profile.user.alias</code>.</p>
  
  <p>I'm new to React &amp; Redux but I think I've done everything by the book. What am I missing?</p>
  
  <ol>
  <li><p>I create a local state in the component and assign the object returned from mapStateToProps.</p></li>
  <li><p>I setState on onChange of text fields.</p></li>
  <li><p>On save click, I call the action defined in mapDispatchToProps passing it the local state. Note, the mapped action is a Thunk function since I use REST Api to save date on server.</p></li>
  <li><p>Server saves the data and returns the same object with new Ids etc. filled in.</p></li>
  <li><p>In fetch.then() I dispatch an action passing the object returned from the server.</p></li>
  </ol>
  
  <p>The error is on the dispatch line.</p>
  
  <pre><code>export function setUserProfile (profile) {
      return function(dispatch) {
          return setProfile(profile)  &lt;-- the API call
              .then(p =&gt; {
                  dispatch(handleSetProfileSuccess(p));
              })
              .catch(error =&gt; {
                  throw error;
              });
      };
  </code></pre>
  
  <p>I've been wrestling with this error since yesterday. I've tried all tricks I've found including changing to createReducer from Redux-Starter-Kit.</p>
  
  <p>I've made sure that the exact same chain of objects, actions, reducers, etc. that I use in the 'set' are the same as in the 'get' action that works.</p>
  
  <pre><code>export function handleSetProfileSuccess (profile) {
      return { type: types.SET_USER_PROFILE_SUCCESS, profile };
  }
  
  
  export function setUserProfile (profile) {
      return function(dispatch) {
          return setProfile(profile)   &lt;--- the api call with fetch
              .then(p =&gt; {
                  dispatch(handleSetProfileSuccess(p));
              })
              .catch(error =&gt; {
                  throw error;
              });
      };
  
  // the action is never dispatched on save since the error is on the dispatch line above.
  // the Redux way
  export default function profileReducer(state = {}, action) {
      switch (action.type) {
          case types.GET_USER_PROFILE_SUCCESS:
              return { ...state, ...action.profile };
          case types.SET_USER_PROFILE_SUCCESS:
              return { ...state, ...action.profile };
          default:
              return state;
      }
  } 
  
  
  // the redux-starter-kit way
  const profileReducer=createReducer({}, {
      GET_USER_PROFILE_SUCCESS: (state, action) =&gt; state=action.profile,
      SET_USER_PROFILE_SUCCESS: (state,action) =&gt; state=action.profile
  });
  </code></pre>
  
  <p>The whole round trip works. The new data is saved on the server and the returned object from the server is correct. The argument 'p' in the .then() call does contain the correct data. But it crashes on the call to </p>
  
  <pre><code>dispatch(handleSetProfileSuccess(p));
  </code></pre>
  
  <p>EDIT: Here's the code snippets from profile.js</p>
  
  <pre><code>// profile.js
  state = { ...this.props.profile };
  
  // on save click handler
  setData = e =&gt; {
      e.preventDefault();
  
      // validate stuff here
      this.props.setProfile(this.state).then(() =&gt; {
          this.setState(prevState =&gt; ({
              ...prevState,
              ...this.props.profile
          }));
      });
  };
  
  export function mapStateToProps(state) {
      return {
          user: state.user, 
          profile: state.profile 
      };
  }
  
  const mapDispatchToProps = {
      getProfile: profileActions.getUserProfile,
      setProfile: profileActions.setUserProfile
  };
  
  export default connect(
      mapStateToProps,
      mapDispatchToProps
  )(Profile);
  </code></pre>
  
  <p>Please help. I'm all out of options.</p>