解构ImmutableJS Map以实现React组件道具

Question

We have a project using React + Redux + ImmutableJS. One of our engineers recently added a helper method to support destructuring an ImmutableJS Map when passing it to a component as props:

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

Thus, we can still do the following and avoid being verbose with repeated calls to Map.get :

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

Yes, that's essentially making two shallow copies (our method + destructuring) of the original object. That should be of minimal expense. I'm wondering though, since I don't see this kind of recommendation really anywhere else in the React/Redux/Immutable communities, is there something else I'm missing that would make this unideal?

The passed properties are still the original, immutable props. It's just the containing object is mutated which doesn't matter, because it's not getting passed to the component anyways. So, what gives? This seems like such a simple solution while avoiding toJS() . Why isn't it really mentioned anywhere?

Answer 1

I followed the advice in the redux docs to use a HOC for all connected components to allow me to interact with plain javascript objects outside of redux. So my selectors and reducers still use ImmutableJS objects, but the rest of the code uses plain javascript objects:

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- not sure if this is the toJS you are mentioning above, I had assumed you meant ImmutableJS.toJS.

as far as preferences, using an HOC you only need to do it once per component, as opposed to each time you use a component in your method.

Answer 2

我认为我正在寻找的“正确”答案是继续使用Immutable JS的toObject() ，该对象将Immutable Map对象转换为常规对象，从而使我们能够继续使用语法糖，同时保持属性不变和不可变必须使用我们自己的浅表副本。