Reduxアプリケーションでデータを遅延ロードする方法は？

Question

のは、私が

IClientState: { 
    firstName: string, 
    lastName: string, 
    details: IClientDetailsState 
} 

を得たとしましょうので、アクションが

xxxxState: { 
    clients: IClientState[], 
    ... 
} 

親状態に1回のFELスイープ内のすべてのクライアントをロードし、のは、さらにサービスからfirstNameとlastNameを取得することは安くなっていると仮定しましょうしかし、いずれかのクライアントのためにdetailsを取得するのは非常に高価で、例えばリストに表示するためには必ずしも必要ではありません。

どうすればよいですか？私はIClientDetailsStateにloadingとloadedのプロパティを追加し、このデータを必要とするコンポーネントのものをチェックすることを考えていました。そのコンポーネントは、両方のプロパティがfalseを生成する必要がある場合、詳細をロードするアクションを実行します。

問題は、このチェックはコンポーネントの視点からはかなり複雑であり、このようにするべきではないことを示す警告サインです。

だから、私はこれをどのように適切に処理しますか？

Answer 1

私は問題がreduxに関連しているとは思わない、代わりにあなたの状態の形状を再考する必要があると思う。

私には、例えば、いくつかの新しいタイプを導入することで、問題を解決するだろう：

IClientBase: { 
    firstName: string, 
    lastName: string 
} 

IClientListItem extends IClientBase: { 
    index: integer 
} 

IClientList{ 
    items: IClientListItem[] 
} 

IClient extends IClientBase{ 
    details: IClientDetails 
} 

今、あなたは安いIClientListItemのリストを収集することができ、ユーザーが項目を選択したときに、あなたがIClientに変換し、で膨らませることができます適切なクライアントの詳細。