使用Redux减速器更新对象的深层属性

我有以下结构。我有一个Company对象，其中包含数组中的许多Person对象。使用Redux减速器更新对象的深层属性

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]当我consolle记录它）它不更新在商店什么。

那么什么是最好的方式来更新Redux中的数组，这是父对象中的一个属性？

谢谢。

来源

2017-04-14 Aris

-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 
    };

来源

2017-04-14 10:31:52 gcedo

当我改变它时，React抱怨减速器中的数据发生了变化。你能详细说一下吗？另外，你从哪里得到newElement？这不是公司的对象。 action.payload是应该在公司属性内部推送的对象。 – Aris

该示例说明了该模式应该是什么，请参阅http://redux.js.org/docs/introduction/CoreConcepts.html您的一段代码显然无所作为。您只是将新人连接到前一个，而不将返回值存储在任何变量中，然后返回以前的状态。正如@momentator向您解释的那样，您需要将该值存储在一个变量中，然后返回一个新的状态，并更新“公司”。 – gcedo

我也试过了Momenator的例子。我得到JS错误，其中说“在Reducer内部发现了一个被禁止的突变。”实际上我有点困惑。 – Aris

使用Redux减速器更新对象的深层属性

回答

相关问题