ビューロジックをreduxで処理する

Question

私のmapStateToPropsは複雑さが増しています。

例えば、複数の接続コンポーネントに、私はこのような何かやっている：

const mapStateToProps = (state) => { 
    return { 
    activeAsset: state.assets.byId[state.assets.activeAssetId].attributes 
    } 
} 

を問題＃1： 上記のコードはactiveAssetId以来、いくつかの条件文でガードできることはかなり明白です必ずしも上記のエラーを投げることにつながる設定されていません。

問題＃2： 私は今、上記のコードを複製する必要があり、複数のコンポーネントの現在のactiveAssetを取得したいとします。

私はreselectについて聞いたことがありますが、ここで正しい選択であるかどうかは完全にはわかりませんが、これはメモ付きの関数で特に使用されているようです。

答えがかなり明白な場合は、私はreduxの生態系にかなり新しいです。

Answer 1

安全な解決策は、セレクタを使用することです。セレクタは、ストア内の状態の形状を把握し、派生データを生成できる再利用可能な関数です。あなたのケースでは

、これはあなたの選択になります

const getAssetAttributes = ({ assets }) => (assets.byId[state.assets.activeAssetId] && assets.byId[state.assets.activeAssetId].attributes) || null; // if the asset exists and has attributes return it, if not return null 

使用法：

const mapStateToProps = (state) => { 
    return { 
    activeAsset: getAssetAttributes(state) 
    } 
} 

あなたはすべての派生したデータ用のセレクタを作成し、関連する減速機のファイルに保存する、またはにすることができます別ファイルselectors。 Reselectは、メモり標準セレクタの作成に役立ちますが、必須ではありません。パラメータが変更されていない場合、セレクタを再選択すると同じデータが返され、不必要にコンポーネントを再レンダリングできなくなります。