Question

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

<div class="group">
  <p class="inputIcon"><i class="fa fa-calendar" aria-hidden="true"></i></p>
  <input type="text" class="setLabel datepicker" placeholder="11/30/2017" id="datepickerSickFrom">
  <i class="fa fa-caret-down" style="position: absolute;right: 0;top: 17px;" aria-hidden="true"></i>
</div>
<div class="group">
  <p class="inputIcon"><i class="fa fa-calendar" aria-hidden="true"></i></p>
  <input type="text" class="setLabel datepicker" placeholder="11/30/2017" id="datepickerSickTo">
  <i class="fa fa-caret-down" style="position: absolute;right: 0;top: 17px;" aria-hidden="true"></i>
</div>
<div class="col-md-8">
  <div class="datepicker" id="sickPanelDatepicker"></div>
</div>

因此，我们仍然可以执行以下操作，避免因重复调用export function toObjectShallow(mapping: Map) { const result = {}; mapping.map((value, key) => { result[key] = value; }); return result; }而变得冗长：

Map.get

是的，这实际上是原始对象的两个浅拷贝（我们的方法+解构）。这应该是最小的费用。我很想知道，因为我在React / Redux / Immutable社区的其他任何地方都没有看到这种推荐，我还缺少哪些会让这个不理想的东西？

传递的属性仍然是原始的，不可变的道具。只是包含对象是变异的并不重要，因为它无论如何都没有传递给组件。那么，是什么给出的？这似乎是一个简单的解决方案，同时避免<XyzComponent {...toObjectShallow(this.props.xyz)}/>。为什么不在任何地方真的提到过？

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

编辑 - 不确定这是否是你上面提到的toJS，我原以为你的意思是ImmutableJS.toJS。

就首选项而言，使用HOC只需每个组件执行一次，而不是每次在方法中使用组件时。

Answer 2

我认为＆＃34;正确＆＃34;回答我一直在寻找的是继续使用Immutable JS＆＃39; s If，它将Immutable Map对象浅层转换为常规对象，从而允许我们继续使用语法糖，同时保持属性不可变，而不是必须使用我们自己的浅拷贝。

解构React组件道具的ImmutableJS映射

2 个答案: