Redux:添加/删除嵌套对象/数组，而不改变

Question

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

    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)。它确实接收到新的道具，但是react-redux内部的shouldComponentUpdate没有检测到变化。

我在这里做错了什么?

Answer 1

如果你想重新渲染包含attributes[action.industry]的对象，你需要重新创建这个数组，就像你对state所做的一样。

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)
        ]
      }
   }

Answer 2

我最终决定这样做:(使用一些ES6的魔法)

  case types.ADD_ATTRIBUTE:
      let newAttrState = state.attributes[action.industry].slice()
      newAttrState.push(action.attribute)
      return Object.assign({}, state, { attributes: { [action.industry]: newAttrState }} );
  case types.REMOVE_ATTRIBUTE:
      var newAttrState = state.attributes[action.userIndustry].slice()
      let removeIndex = newAttrState.indexOf(action.attribute)
      newAttrState.splice(removeIndex, 1)
      return Object.assign({}, state, { attributes: { [action.userIndustry]: newAttrState }} );

*更新:我现在意识到，是覆盖整个attributes对象，只有一个动态键控数组，而我需要维持存储在该对象中的其他数组…

Answer 3

React-redux的shouldComponentUpdate()对状态进行浅层比较，以决定是否渲染。这种浅层比较只检查对象的一个层次深度，这意味着如果你不改变状态本身的引用或它的任何一级属性，它将不会触发组件的更新。

你的数组被深深地嵌套在state.attributes[action.industry]中，你的动作不修改状态和属性，所以react-redux不会更新你的组件。为了解决你的问题，你需要改变attributes[action.industry]，创建一个新的数组(例如使用Array.concat()代替Array.push()或使用像attributes[action.industry] = [...attributes[action.industry], action.attribute ]

一样的扩展运算符)。

或者，如果您正在使用有状态组件，您可以创建自己的shouldComponentUpdate()版本，该版本考虑了attributes属性，以便决定是否呈现

Answer 4

如何处理types.ADD_ATTRIBUTE的情况:

与<<p> strong> Object.assign :

const newActionIndustry = state.attributes[action.industry].concat(action.attribute)
const newAttributes = Object.assign({}, state.attributes, {
  [action.industry]: newActionIndustry
})
const newState =  Object.assign({}, state, {
  attributes: newAttributes
})

使用此代码自行处理types.REMOVE_ATTRIBUTE情况