私はreduxコンテナに不変のシーケンスアルゴリズムを行う必要がありますか？

Question

私は反応する/還元するのが新しいです。私は（Map/Set ...のようなimmutablejsオブジェクトを格納する）reduxストアのコンテナパターンを使用しています。

私が知っているように、Reactコンポーネントには、propsのシャドウ比較のためのshouldComponentUpdateというメソッドがあります。不変はこの計算に多く役立ちます。だから私の質問は、私は以下のようにreduxコンテナのシーケンスアルゴリズムを行う必要がありますか？

export default connect(
    (state) => ({ 
     data: state.getIn(['data', 'map']) 
     .filter((obj, key) => state.getIn(['user', 'selectedDataSet']).has(key)) 
     .toSet(), 
    }), 
)(MyComponent); 

または、このロジックをcomponentWillReceiveProps（）に入れる方が良いですか？

Answer 1

mapStateToPropsFunction（わからない人のための最初の接続パラメータ）にこの機能を保存する必要があります。私はできるだけ限定された小道具を私のコンポーネントに渡しておきたい。つまり、コンポーネントまたはその子に必要とされる小道具のみを送信します。このようにして、コンポーネントは余分な小道具を扱う方法や特別なロジックを持つ方法を知る必要はありません。

mapStateToPropsのロジックを維持するもう1つの利点は、コンポーネントがPureComponent（class MyComponent extends React.PureComponent）を拡張して、浅い小道具検査を使用して無料のshouldComponentUpdateを取得できることです。

これは、子コンポーネントにこれを残しておきたい理由があると確信しています。

編集：ImmutableJS

では不変JSと非常によくペアを反応します。 ===でも、深くネストされたオブジェクトが変更されたかどうかを判断するために、比較が必要です（すべての変更によって全く新しいオブジェクトが作成されるというルールがこれを可能にします）。

反応コンポーネントがレンダリングするために必要なものすべてを渡す必要があります。たとえば、コンポーネントがリストに依存する場合は、リスト全体をコンポーネントに渡してからレンダリングする前にフィルタリングします。あなたの例では

：

render() { 
    const data = dataProp 
     .filter((obj, key) => state.getIn(['user', 'selectedDataSet']).has(key)) 
     .toSet() 

    return (
     <div>{data}</div> 
    ); 
} 

これは、あなたの接続は、この（これは100％正しい構文ではないかもしれないことに注意してください）のようになります前提としています。

export default connect(
    (state) => ({ 
     dataProp: state.getIn(['data', 'map']) 
    }), 
)(MyComponent);