为 React 组件 Props 解构 ImmutableJS 映射答案

【问题标题】：Destructuring ImmutableJS Map for React Component Props为 React 组件 Props 解构 ImmutableJS 映射
【发布时间】：2018-06-08 05:54:21
【问题描述】：

我们有一个使用 React + Redux + ImmutableJS 的项目。我们的一位工程师最近添加了一个辅助方法，以支持在将 ImmutableJS Map 作为 props 传递给组件时对其进行解构：

export function toObjectShallow(mapping: Map) {
    const result = {};
    mapping.map((value, key) => {
        result[key] = value;
    });
    return result;
}

因此，我们仍然可以执行以下操作，并避免重复调用 Map.get 导致冗长：

<XyzComponent {...toObjectShallow(this.props.xyz)}/>

是的，这实质上是对原始对象进行两个浅拷贝（我们的方法 + 解构）。这应该是最小的费用。不过我想知道，因为我在 React/Redux/Immutable 社区的其他任何地方都没有看到这种建议，我是否还缺少其他东西会使这变得不理想？

传递的属性仍然是原始的、不可变的道具。只是包含对象发生了变异，这并不重要，因为它无论如何都不会传递给组件。那么，什么给了？这似乎是一个简单的解决方案，同时避免了toJS()。为什么在任何地方都没有真正提到它？

【问题讨论】：

对我来说非常值得商榷的问题，以及您可以在此处查看的一些原因：esdiscuss.org/topic/extensible-destructuring-proposal 从我的角度来看，没有理由这样做，因为您可以将 map 传递给更智能的组件，并且仍然获得不可变的好处，但是通过您的方法，您仍然可以改变容器。因此，您可以更新或重新设计您的 redux 端以获得干净的状态，而无需传播 Immutable。

标签： javascript reactjs redux immutable.js

【解决方案1】：

我遵循了 redux 文档中的建议，为所有连接的组件使用 HOC，以允许我与 redux 之外的普通 javascript 对象进行交互。所以我的选择器和归约器仍然使用 ImmutableJS 对象，但其余代码使用纯 javascript 对象：

https://redux.js.org/docs/recipes/UsingImmutableJS.html#use-a-higher-order-component-to-convert-your-smart-components-immutablejs-props-to-your-dumb-components-javascript-props

edit-不确定这是否是您上面提到的 toJS，我以为您的意思是 ImmutableJS.toJS。

就偏好而言，使用 HOC 您只需为每个组件执行一次，而不是每次在方法中使用组件。

【讨论】：

实际上@James 询问为什么这种解构 Immutable 不是一种普遍的范式，但没有 Immutable 的 props 传播是。
你在一个连接的组件上只做一次，与你将 props 传递给 from 一个连接的组件的每一个组件的区别不是吗？
不，我认为您只转换到非不可变道具一次，每隔一次您传递道具时，您将传递一个 Imm.js 对象。例如，一个用户容器列表将获得一个带有 userid:info 的地图，然后 UserCard 将获得一个用户道具等的地图，等等，直到最后一个头像将获得不可变的 Map.get('avatar_url') 例如跨度>
连接的组件包含4个其他组件，您调用该方法4次。
我主要是问这里的“最佳实践”是什么？我们正在做的工作，但它闻起来。我很难相信没有建议的方法将不可变对象作为道具传递给组件（没有一堆Map.get() 调用的冗长。

【解决方案2】：

我认为我一直在寻找的“正确”答案是继续使用 Immutable JS 的 toObject()，它将不可变 Map 对象浅转换为常规对象，从而允许我们在保留属性的同时继续使用语法糖不可变且不必使用我们自己的浅拷贝。

【讨论】：