reactjs - Redux:从嵌套对象/数组中添加/删除，而不发生变异？

Question

我认为 assign 应该创建一个新对象，这就是我在 reducer 中这样做的原因:

    case types.ADD_ATTRIBUTE:
      var newState = Object.assign({}, state)
      newState.attributes[action.industry].push(action.attribute)
      return Object.assign({}, state, newState);

    case types.REMOVE_ATTRIBUTE:
      var newState = Object.assign({}, state)
      var removeIndex = newState.attributes[action.industry].indexOf(action.attribute)
      newState.attributes[action.industry].splice(removeIndex, 1)
      return Object.assign({}, state, newState);

但是，当我这样做时，组件将不会触发更新 (componentWillReceiveProps)。它确实收到了新的 props，但是 react-redux 内部 shouldComponentUpdate 没有检测到更改。

我在这里做错了什么？

Answer 1

如果您想重新渲染包含 attributes[action.industry] 的对象，则需要像处理状态一样重新创建此数组。

case types.ADD_ATTRIBUTE:
  return {
    ...state,
    attributes: {
      ...state.attributes,
      [action.industry]: [...state.attributes[action.industry], action.attribute]
    }
  }

case types.REMOVE_ATTRIBUTE:
  const removeIndex = newState.attributes[action.industry].indexOf(action.attribute)
  return {
    ...state,
    attributes: {
      ...state.attributes,
      [action.industry]: [
          ...state.attributes[action.industry].slice(0, removeIndex), 
          ...state.attributes[action.industry].slice(removeIndex + 1)
        ]
      }
   }