为 React Component Props 解构 ImmutableJS 映射

Question

我们有一个使用 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 社区的其他任何地方都看不到这种推荐，是否还有其他我遗漏的东西会使它变得不理想？

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

Answer 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 您只需为每个组件执行一次，而不是每次在您的方法中使用一个组件。

Answer 2

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

为 React Component Props 解构 ImmutableJS 映射

Destructuring ImmutableJS Map for React Component Props

javascript

reactjs

immutable.js

redux