javascript - 在分派(dispatch)之间检测到状态突变，但我没有改变状态

Question

我知道以前有人问过这个问题，但几乎所有的问题都在谈论 OP 直接改变状态，我试图避免使用像展开运算符这样的技术(在对象和数组中)，但尽管如此其中我收到以下错误:

Uncaught Error: A state mutation was detected between dispatches, in the path `courses.0`. This may cause incorrect behavior. (http://redux.js.org/docs/Troubleshooting.html#never-mutate-reducer-arguments)
  at invariant (eval at <anonymous> (bundle.js:922), <anonymous>:40:15)
  at eval (eval at <anonymous> (bundle.js:3825), <anonymous>:50:36)
  at eval (eval at <anonymous> (bundle.js:3846), <anonymous>:14:16)
  at dispatch (eval at <anonymous> (bundle.js:3853), <anonymous>:37:18)
  at eval (eval at <anonymous> (bundle.js:1151), <anonymous>:63:5)
  at eval (eval at <anonymous> (bundle.js:3846), <anonymous>:11:18)
  at Object.eval [as saveCourse] (eval at <anonymous> (bundle.js:3860), <anonymous>:4:12)
  at Object.ManageCoursePage._this.saveCourse [as onSave] (eval at <anonymous> (bundle.js:2080), <anonymous>:134:27)
  at CourseForm._this.onHandleSave (eval at <anonymous> (bundle.js:2052), <anonymous>:93:19)
  at Object.ReactErrorUtils.invokeGuardedCallback (eval at <anonymous> (bundle.js:1301), <anonymous>:69:16)

我读了the article that the error points to ，正如它所暗示的那样，我检查了我是否手动改变了我的 reducer 中的状态，但我看不到可能发生的地方:

const courseReducer = (state = initialState.courses, action) => {
  switch (action.type) {
    case types.LOAD_COURSE_SUCCESS:
      return action.courses;
    case types.CREATE_COURSE_SUCCESS:
    //This action throw the error 
      debugger;      
      return [
        ...state,
        Object.assign({}, action.course)
      ];
    case types.UPDATE_COURSE_SUCCESS:
     //This action throw the error
      debugger;
      return [
        ...state.filter(course => course.id !== action.course.id),
        Object.assign({}, action.course)
      ];
    case types.DELETE_COURSE_SUCCESS:
      return [...state.filter(course => course.id !== action.courseId)];
    default:
      return state;
  }
};

这是 a sandbox with part of the application可用于复制错误，这种错误只会在我创建新类(class)或尝试编辑现有类(class)时偶尔发生(操作分别为 CREATE_COURSE_SUCCESS 和 UPDATE_COURSE_SUCCESS在我的 courseReducer)

如果有人能帮我找出这个错误的根源在哪里，我将不胜感激。

Answer 1

问题是你正在改变状态，在CoursesPage.js里面, 在 mapStateToProps :

let courses = state.courses.sort((c1, c2) =>
  c1.title.localeCompare(c2.title, 'en', { sensitivity: 'base' }),
);

Array#sort 是一个就地操作，因此它通过对源数组就地排序来改变源数组。这意味着，sort正在变异 state.courses ，从而导致错误。相反，复制一份 state.courses在你排序之前:

[...state.courses]

以上使用spread syntax将元素传播到一个新数组中，本质上是克隆它。这与 Array#slice 相同.然后你可以这样排序:

let courses = [...state.courses].sort((c1, c2) =>
  c1.title.localeCompare(c2.title, 'en', { sensitivity: 'base' }),
);

这不会改变原来的 state.courses并且不会抛出错误。

---

注意:还有一些地方你在变异this.state直接，例如 ManageCoursePage.js 的第 32 行你在哪里:

this.state.errors = {}

只改变 this.state组件构造函数中的对象。使用 setState相反。