使用 Redux reducers 更新对象的 deep 属性

Question

我有以下结构。我有一个 Company 对象，它在一个数组中包含许多 Person 对象。

companies: CompanyInterface = {
   persons: PersonInterface[] = []
}

我正在尝试在表格中显示属于该公司的人员。但是，当我将人员添加/删除到人员数组时，它应该会自动更新。

现在我的减速器是这样的：

// Initial state
companies: CompanyInterface[];

// Reducer
case Constants.GLOBAL_COMPANY_ADD_PERSON:
  [action.payload.person].concat(state.companies.filter(company => company.id === action.payload.id)[0].persons));

  return {
    ...state
  };

虽然我可以验证 concat 是否正常工作（我可以在控制台登录时看到 [Person]），但它不会更新商店中的任何内容。

那么在 Redux 中更新数组（父对象中的属性）最好的方法是什么？

谢谢。

Answer 1

您可能想看看Array.prototype.concat，因为它不会对数组进行原地变异，而是returns a new array。在您的示例中，您没有改变状态。

相反，您需要用新值替换旧值。例如：

case 'ADD_ELEMENT':
   const { elements: previousElements } = state;
   const newElement = action.payload;
   const newElements = previousElements.concat(newElement)
   return {
      ...state,
      elements: newElements
   };