React Redux状态更新异常求助：添加笔记后notes值变为2

嘿，我懂你现在的困惑！作为React和Redux新手，踩这个坑太正常了，咱们一步步来捋清楚问题出在哪，怎么解决。

首先，你遇到的核心问题是**Array.push()方法的特性**以及Redux对reducer的要求：

• push()方法会直接修改原数组（这违反了Redux reducer必须是纯函数的规则），而且它的返回值是数组的新长度，不是更新后的数组！所以你看到state.notes = 2，其实是push返回的数组长度，不是你想要的数组本身。
• Redux要求reducer是纯函数：不能修改传入的state参数，必须返回一个全新的状态对象。

那正确的写法应该是怎样的呢？我们需要创建一个新数组，把旧数组的所有元素和新的payload.note都包含进去，这里用扩展运算符...就很合适：

case SUBMIT_NOTE:
  console.log(payload.note);
  return {
    ...state, // 复制原state的其他属性
    notes: [...state.notes, payload.note] // 创建新数组，加入新元素
  };

这样做的好处：

• 用...state保留了原状态中除notes外的其他属性
• [...state.notes, payload.note]创建了一个全新的数组，包含旧数组的所有元素和新增的note，完全没有修改原数组，符合纯函数的要求

另外，你也可以用Array.concat()方法达到同样的效果，因为concat()也会返回一个新数组，不会修改原数组：

notes: state.notes.concat(payload.note)

两种写法都可以，选你觉得顺手的就行～

内容的提问来源于stack exchange，提问作者Chris Rutherford