React/Redux - 我如何制作深度嵌套状态的副本？ [复制]答案

【问题标题】：React/Redux - how can I make a copy of deeply nested state? [duplicate]React/Redux - 我如何制作深度嵌套状态的副本？ [复制]
【发布时间】：2017-04-26 13:33:43
【问题描述】：

我有一个深度嵌套的 redux 状态，如下所示：

{
    name: "Item One",
    children: [
    {
        name: "Item Two"
        children: [
            ....
        ]
    },
    {
        name: "Item Three",
        children: [
            ....
        ]
    }
    ]
}

我要把它做成一个副本，这样我就可以方便地修改它，然后用它来替换状态。

不幸的是，仅仅使用 {...state} 不起作用，因为所有嵌套的子对象都没有被复制，它们仍然引用相同的对象。有没有方便的解决方法？

【问题讨论】：

标签： javascript reactjs ecmascript-6 redux

【解决方案1】：

有几个选项：

使用update immutability helper，它有一些优秀的docs on the React site，
使用像 clone 这样针对这类事情进行了优化的包。

我推荐第一个，因为语法特别强大，尤其是在处理像 Redux 存储这样的大型结构时。

作为文档中的示例：

import update from 'immutability-helper';

const newData = update(myData, {
  x: {y: {z: {$set: 7}}},
  a: {b: {$push: [9]}}
});

允许您修改深度嵌套的属性，而不必担心现有对象的危险突变。

【讨论】：

【解决方案2】：

最简单的捷径是：

const clone = JSON.parse(JSON.stringify(state));

总而言之，涉及克隆对象的问题，有几个关于该主题的答案，具体取决于以下内容：

源对象中是否有函数引用，
是否涉及 dom 元素，
日期对象，
还有更多……

但在这种情况下，您正在处理一个“普通的 json 对象”，因为它是 redux 状态，所以上面的方法可以工作。

另一种方法是复制所有嵌套数据的递归函数，但如上所述，在这种情况下您不必这样做，因为您不必担心 dom 元素或其他类似的东西。

【讨论】：

我认为 Redux 通常建议对象是可序列化的。然而，JSON.parse 的一大警告（鉴于函数可能不应该成为状态的一部分）是Date（反）序列化。
我更新了我的答案并将日期对象添加到列表中。然而，这绝对是一种“快速而肮脏”的方法，但如果您知道没有任何“复杂”的成员，它无需太多代码就可以工作。