React中使用Seamless-Immutable在Reducer中向数组添加数据的方法

问题出在你直接调用了state.foo.push("newData")——seamless-immutable创建的是不可变对象，原生数组的push方法会直接修改原数组，这既违反了seamless-immutable的设计原则，也不符合Redux reducer必须是纯函数（不能修改原state）的要求。

要正确添加元素，你需要生成一个包含新数组的新state对象，下面是几种可行的方案：

方案1：使用concat + set（最兼容） #

concat会返回一个包含原数组元素和新元素的新数组，再通过seamless-immutable的set方法更新foo属性：

export const INITIAL_STATE = Immutable({ foo: [], });

function orderReducer(state = INITIAL_STATE, action) {
  console.log('reducer is running');
  switch (action.type) {
    case GET_MENU: {
      return state.set('foo', state.foo.concat('newData'));
    }
    default: return state;
  }
}

方案2：使用ES6展开运算符（更简洁） #

如果你的项目环境支持ES6+语法，可以用展开运算符快速生成新数组：

case GET_MENU: {
  return state.set('foo', [...state.foo, 'newData']);
}

方案3：使用seamless-immutable的push方法（注意版本） #

部分版本的seamless-immutable对数组的push方法做了封装，它不会修改原数组，而是返回一个包含新元素的新数组，所以也可以这样写：

case GET_MENU: {
  return state.set('foo', state.foo.push('newData'));
}

不过更推荐前两种方案，因为concat和展开运算符的行为更直观，不容易和原生数组的push混淆。

核心原则记住：永远不要直接修改seamless-immutable包装的对象/数组，必须通过返回新对象的方式更新state。

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