使用 Object.asassign 正确返回嵌套状态

Properly returning nested state with Object.assign

本文关键字：返回 嵌套 状态 Object asassign 使用      更新时间：2023-09-26

我正在开发一个 React/Redux 应用程序，在大多数情况下，一切都很顺利。

从本质上讲，它是一个内置分类的待办事项应用程序。

当用户在类别中添加待办事项时，我无法在化简器中正确返回完整的现有状态。

调度ADD_ITEM操作之前的 redux 状态如下所示：

{
items: {
    "HOME": [["Do laundry", "High Priority"],["Feed kids", "Low priority"] ],
    "WORK": [["Get promotion", "High priority"],["Finish project", "Medium priority"] ],
    "BOTH": [["Eat better", "Medium priority"],["Go for a run", "High priority"] ],
},
settings: {
    Test: "test"
}
}

用户导航到一个类别（预制的，尚未实现创建它们），并可以创建一个具有名称和优先级的新待办事项。这将调度一个返回数组的操作，例如 [类别、名称、优先级]。

目前在我的化简器中，我有它成功添加项目的地方，但它正在清空/覆盖所有现有类别。

我的减速器看起来像这样：

case types.ADD_ITEM:
let cat = action.payload[0];
let name = action.payload[1];
let priority = action.payload[2];
return Object.assign({}, state, { items: { [cat]:   [...state.items[cat], [name, priority]]}});

我尝试先创建一个包含所有组合项的新对象，如下所示：

let combinedItems = Object.assign({}, state.items, { [cat]: [...state.items[cat], action.payload] });

如果我控制台.log上面的组合项，我会得到我想要的确切对象。但是，我正在努力让化简器返回最终对象以反映这一点。

当我尝试类似下面的操作时，我得到了一个包含组合项作为项内单独键的对象。

        return Object.assign({}, state, { items: { combinedItems, [cat]: [...state.items[cat], [name, priority]]}});

谁能帮我让我的最终 redux 状态包含所有现有的类别/项目 + 用户添加的类别/项目？我真的很感激你的帮助。

我认为你应该在有数组的地方使用对象。在操作有效负载中，而不是：

[category, name, priority]

您可以拥有：

{category, name, priority}
action.payload.category

我会对您的待办事项进行相同的更改。而不是：

[["Eat better", "Medium priority"], ... ]

您可以拥有：

[{ name: "Eat better", priority: "Medium" }, ... ]

现在，关于是否最好将items作为具有类别键的对象或知道其类别的项目数组......好吧，我认为后者更好，这样，如果您获得单个项目，则无需转到其父项即可找出它属于哪个类别。这也会使您的问题更易于管理。

items: [
  { 
    name: "Eat better", 
    priority: "Medium", 
    category: "Both" 
  }, ... 
]

将所有这些放在一起来解决您的问题：

case types.ADD_ITEM:
  let newItem = {
    name: action.payload.name,
    priority: action.payload.priority,
    category: action.payload.category
  }
  return Object.assign({}, state, { items: [ ...state.items, newItem ] })

您以前将类别作为键有什么好处，用这种结构重现都是微不足道的。

获取HOME类别中的所有项目：

this.props.items.filter(item => item.category === 'HOME')
相关文章：