javascript - Redux 中不可变更新模式的问题

Question

我正在尝试更新 redux reducer 中归档的嵌套数组，这是我想要更新的数组(只需添加 updating:true 归档)我的数组看起来像

我想在编号提交后在房间对象上添加updating:true提交

items: Array(1)
    0:
    name: (2) [{…}, {…}]
    rooms: Array(2)
        0: {_id: "5d494e5b11b962065632c760", number: "100" …}
        1: {_id: "5d494e6211b962065632c761", number: "102" …}

看起来像

items :
     [{
        name: [{}],
        rooms : [{}]
     }]

这是我的 redux reducer 代码，我正在尝试更新

case Constants.Status_ADD_REQUEST:
var ID = ID; // action id

return {...state,
  items:[{...state.items, 
        rooms:[{...state.items.rooms, 
            rooms:{...state.items.rooms.map(x=> x._id === ID ? {...x,updating: true} :  x )}}]
 }]
};

无论如何它不起作用:)请指导我纠正它

Answer 1

再看一下 JavaScript 中的 spread Syntax，尤其是数组文字的扩展。例如，在您的 reducer 中，您使用仅包含一个 fix 对象的 items 数组创建一个新状态(即使您添加更多项目，它仍然只是一个对象)在你的例子中)。此项目对象包含您之前的 converted and spread items array 和 rooms 属性 - 并不是真正的状态形状。

如何创建状态:

Full example repo (with TypeScript)

const initialState = {...}

function rootReducer(state = initialState, action) {
  switch (action.type) {
    case Constants.Status_ADD_REQUEST:
      return {
        ...state,
        items: state.items.map(item =>
          item.rooms.some(i => i.id === action.id)
            ? {
                ...item,
                rooms: item.rooms.map(room =>
                  room.id === action.id ? { ...room, updating: true } : room
                )
              }
            : item
        )
      };
    default:
      return state;
  }
}

采用 "Updating an Item in an Array" Redux docs 的风格。

如果你必须以这种方式手动确保 immutable patterns ，事情很快就会变得丑陋。原因:更新嵌套数据的关键是每一层嵌套都必须适当复制和更新(结构共享)。

为了规避这些问题，您的目标应该是 keep your state flattened 和 compose reducers 。如果克隆您的状态仍然变得太复杂，您可以使用 Immutable Update Utility Libraries 。我个人可以推荐 immer ，因为您可以以可变的方式更改状态，而该库则通过 JavaScript 代理透明地处理深度克隆/结构共享。

PS:如果它是您的 domain/app data 的一部分，那么为“更新室”考虑另一个名称也是有意义的。