我有一个使用redux的反应应用程序,状态对象如下所示:
{
personal: { firstName: 'Lance', lastName: 'Uppercut' },
phones: [
{ id: 1, number: '111-222-3333' },
{ id: 2, number: '444-555-6666' }
]
}
假设发生的一个动作只改变了personal
属性,只留下phones
。我是否必须在reducer中复制整个phones
数组,或者可以将它指向旧数组,因为它没有改变?
换句话说,这没关系吗?
return Object.assign({}, state, {
personal: { firstName: 'Rock', lastName: 'Strongo' },
phones: state.phones
});
还是我必须复制阵列?
return Object.assign({}, {
personal: { firstName: 'Rock', lastName: 'Strongo' },
phones: state.phones.map(p => Object.assign({}, p))
});
这也适用于对象引用。如果phones
这样的嵌套对象
{
personal: { firstName: 'Lance', lastName: 'Uppercut' },
phones: {
'1': { number: '111-222-3333', areaCode: '619' },
'2': { number: '444-555-6666', areaCode: '512' }
}
}
是否可以将新的状态对象指向旧的状态引用?
您只能更新已更改的内容,并且它包含结构。
由于州已经包括phones
,而它没有,你只需要合并改变的个人:
return Object.assign({}, state, {
personal: { firstName: 'Rock', lastName: 'Strongo' }
});
或者使用object spread:
return {
...state,
personal: { firstName: 'Rock', lastName: 'Strongo' }
};
最好的方法是创建状态的新副本,只更改要更改的字段,或者:
return {
...state,
personal: { firstName: 'Rock', lastName: 'Strongo' }
});
(这是es6的扩展运算符的用法,它返回状态对象的新副本,并仅更改personal
字段,该字段比旧的Object.assign
方式更短更干净)。