immutable-jsでreduxを使用する場合 - セレクタでtoJS（）を呼び出しますか？または、レンダリング機能で.get（ 'prop'）を使用しますか？

Question

今私はreselectを使用してセレクタを作成し、ストアからデータを抽出し、connect経由でpropsに渡します。簡単にするために、 を私のセレクタの結果は常にJSオブジェクトである（セレクタの終わりにtoJS()を呼び出す）、このような何か：

const selector = state => state.get('data').toJS(); 

今、私はいくつかのパフォーマンスを改善しようとしていると私はそのshouldComponentUpdateを実現しました浅い比較は、私がセレクタから戻ってくる方法のため、不変性の利点を失います。一方、私のhtml内.get('prop')を使用すると、非常に迷惑

を思わ：

<div>{this.props.data.get('prop')}</div> 

私はこのように、変更可能である子コンポーネントに簡単なJSオブジェクトを渡すケースを持っている場合は特に：

<ChildComponent totalItems={10} /> 

そして、小道具にアクセスする際に一貫性がありません（変更可能なものと不変なものがあります）。

私は、ヘルパーunwrap関数を作成すると考え、このような何か：..私は本当に、これらのアプローチのいずれか好きではない

const unwrap = obj => obj && obj.toJS ? obj.toJS() : obj; 

しかし、私は本当にこのソリューション好きではありません。

クリーンコード&の両方に何を使用しますか？

Answer 1

コンポーネントにプロップを渡すには、キーの下のすべてのデータを不変として収集します。

<MyComponent propsKey={Immutable.fromJS({someData: {key: "value"}})} /> 

Immutableの利点を利用するには、toJS（）の使用を避ける必要があります。非常にコストがかかり、便利な不変関数を使用することはできません。 "value"に達するまで、あなたはImmutable.get（）を使うべきです。それは最初は迷惑ですが、時間の中でそれがどのように役立ち、使いやすいかを見ることができます。 （getIn（）を使用して内部キーを取得することは、チェーン取得関数よりも面倒である可能性があります）。このようにして、コードはより効率的に機能し、unwrap関数を使用する必要はありません。コンポーネントではthis.props.propsKeyの下でデータを常に不変にします。

Answer 2

あなたのプレゼンテーションコンポーネントは、それに渡されたImmutable.jsオブジェクトの小道具でtoJS()を呼び出す単純な高次コンポーネントでラップする必要があります。

これにより、Immutable.jsのパフォーマンス上のメリットを最大限に引き出す一方、コンテナコンポーネントの再レンダリングが過度になるのを防ぎます。また、プレゼンテーションコンポーネントを依存関係がなく、簡単に再利用可能でテスト可能に保ちます。

Reduxドキュメントは、best practises for using Immutable.js、特にwhen not to use .toJS(),why your presentational components should be kept pureおよびhow a "toJS" higher-order component might be defined and usedという優れた選択肢を持っています。