1

私のストアには の配列が含まれていますgoal。connect() を使用して redux ストアに接続する Goal コンポーネントがあるためgoal、小道具として a があります。

ゴール コンポーネントには、派生データを作成するためにすべてのゴール オブジェクトが必要な子があります。このデータがどのように導出されるかを抽出するために reselect を使用したいのですが、すでにゴールにアクセスしているときに、redux ストア全体から同じゴールを再度選択するのは意味がありません。

そのため、私は現在、ゴール コンポーネントからその子にゴール オブジェクトを渡し、その際にセレクターを呼び出しています。

これは、セレクターの引数が、状態のすべてではなく、状態の一部である 1 つの目標であることを意味します。これを使用する方法のすべての例は「接続」を使用するため、セレクター関数は状態全体を取り込みます。

私のアプローチは意味がありますか？それとも、要点を完全に見逃して、ステート ツリーの形状を適切にカプセル化できなくなったのでしょうか。

コメント/アドバイスをいただければ幸いです

4

2 に答える 2

2

セレクターの目的は、派生データを保持して、redux ストアが保持する必要がないようにすることです。状態ツリーのサブピースを渡すことは正当です。

const getThing = state => state.the.thing.I.care.about;
const getBoundaryConditions = state => state.the.boundary.conditions.man.whoa;

export const getTheThingICareAbout = createSelector(
  [ getThing, getBoundaryConditions ],
  (thing, conditions) => {
    //do stuff to thing depending on conditions
    return thing.beConditionallyAwesome(conditions);
  }
);

また、props を介して Goal コンポーネントの子にゴール オブジェクトを渡すことは可能ですが、props を介して id 値 (または何か) を子に渡し、子に対応するゴールを取得させる方が良いでしょう。状態ツリーの使用(ここconnect()の強力な 3 番目mergePropsの引数を参照してください。これにより、渡された props を状態ツリー全体とディスパッチと共に使用できます。これは非常に便利です)。connect() ownProps

これは、Goal コンポーネントが prop を介して大きな脂肪オブジェクトを渡す必要がないため、より優れています。代わりに、子コンポーネントは、関心のあるゴール オブジェクトの特定の部分を選択しmapStateToProps()、コンポーネントの props をできるだけ浅く保つことができます。

…少なくともそれは私の意見です。頑張ってください！

于 2016-10-20T23:21:52.863 に答える
1

props を介して (親から子へ) ゴールを渡すことを選択できます。これは、親が「スマート」(状態を知っている) であり、子が「愚か」(props で指定されたものをレンダリングするだけ) であることを意味します。

または、子コンポーネントの状態に (好きなだけ) アクセスすることもできます。

于 2016-10-20T23:15:52.023 に答える