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

Posted

技术标签:

【中文标题】在 React Redux 中有指向旧状态对象的指针可以吗?【英文标题】:Is it okay to have pointers to old state objects in 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' 
    

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

【问题讨论】:

【参考方案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' 
;

【讨论】:

以上是关于在 React Redux 中有指向旧状态对象的指针可以吗?的主要内容,如果未能解决你的问题,请参考以下文章

Websocket 事件在 React 应用程序中接收旧的 redux 状态

使用redux,如何避免在进行新的API调用之前渲染旧的状态数据?

React-Native + Redux + ImmutableJS内存泄漏

在 react-native-debugger 中配置 redux 存储的初始状态?

React Redux 在映射状态后获取 NaN

react-redux状态管理思想