在 React Redux 中有指向旧状态对象的指针可以吗？答案

【问题标题】：Is it okay to have pointers to old state objects in React Redux?在 React Redux 中有指向旧状态对象的指针可以吗？
【发布时间】：2019-04-22 00:30:49
【问题描述】：

我有一个使用 redux 的反应应用程序，其状态对象如下所示：

{
    personal: { firstName: 'Lance', lastName: 'Uppercut' },
    phones: [
        { id: 1, number: '111-222-3333' },
        { id: 2, number: '444-555-6666' }
    ]
}

假设发生的操作仅更改了 personal 属性，而单独留下了 phones。我是否必须将整个 phones 数组复制到 reducer 中，还是可以让它指向旧数组，因为它没有改变？

也就是说，这样可以吗？

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

可以让新状态对象指向旧状态对象的引用吗？

【问题讨论】：

标签： reactjs redux react-redux copy state

【解决方案1】：

最好的方法是创建一个新的状态副本，只更改你想要更改的字段，即：

return { ...state, personal: { firstName: 'Rock', lastName: 'Strongo' } });

（这是 es6 的扩展运算符的用法，它返回状态对象的新副本，只更改 personal 字段，比旧的 Object.assign 方式更短更干净）。

【讨论】：

【解决方案2】：

您只能更新已更改的内容，并且它包含结构。

由于state已经包含phones，而没有，你只需要在更改后的person中合并即可：

return Object.assign({}, state, {
    personal: { firstName: 'Rock', lastName: 'Strongo' }
});

或者使用object spread:

return {
    ...state,
    personal: { firstName: 'Rock', lastName: 'Strongo' }
};

【讨论】：