在React Redux中指向旧状态对象是否可以?

问题描述 投票:2回答:2

我有一个使用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' }
    }
}

是否可以将新的状态对象指向旧的状态引用?

reactjs redux react-redux copy state
2个回答
2
投票

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

由于州已经包括phones,而它没有,你只需要合并改变的个人:

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

或者使用object spread

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

3
投票

最好的方法是创建状态的新副本,只更改要更改的字段,或者:

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

(这是es6的扩展运算符的用法,它返回状态对象的新副本,并仅更改personal字段,该字段比旧的Object.assign方式更短更干净)。

© www.soinside.com 2019 - 2024. All rights reserved.