4

サーバーから次の形式で取得した映画に関するデータを表示するアプリを作成しているとします。

{ movies: [], actors: [], directors: [], years: [] }

異なる配列は、ID を介して相互に関連付けられます。つまり、ムービー内のオブジェクトは次のようになります。

{title: 'The Shining', cast: [`837392010`, `363893920` ...], ...}

キャスト配列内のこれらの ID のそれぞれは、actors 配列内のアクターへの参照です。

データをそのまま redux ストアに配置しますが、さまざまなコンポーネントがさまざまな任意の方法でデータを使用する必要があります。たとえば、年の配列が俳優に直接リンクしていなくても、1 つのコンポーネントで 1970 年代にジャック ニコルソンが出演したすべての映画を一覧表示する必要があります。それ自体が俳優にリンクしている映画にリンクしているだけです。したがって、コンポーネントがレンダリングできるようになる前に、一連のデータ変換を実行する必要があります。

別のコンポーネントには、マーティン・スコセッシとロバート・ディネロが一緒に仕事をしたすべての時間がリストされ、別のコンポーネントには、タイトルに「火」が含まれるすべての映画がリストされ、別のコンポーネントには、1990年から2000年の間にトム・ハンクスが出演したすべての映画がリストされます...

プロダクト マネージャーは、このような任意の表示を常に追加および削除することを計画しているため、クエリ可能なデータベースのように、アプリ内で日付が使用されます。特定のクエリは頻繁に変更されます。

また、変換はクライアントで行う必要があるとしましょう。サーバーの唯一の機能は、上記の正規化された形式でデータを送信することです。

スケーラブルで簡単に更新できるように、このようなアプリを構築する最善の方法は何ですか? いくつかのアプローチを考えることができます:

  1. レデューサーですべてのマッピングを行います。欠点は、レデューサーが肥大化することです。同じデータを大量の異なる形式でキャッシュする必要があります。

  2. 生の正規化されたデータをレデューサーに保存し、コントローラー コンポーネント (高レベル コンポーネント) を使用して、子が必要とする形式にマップします。ビューにビジネスロジックが散らばっているので、私はこれに夢中ではありません。もちろん、これは高レベルのコンポーネントをビューと考えていることを前提としています。

  3. connect、mapStateToProps 関数でマップします。各高レベル コンポーネントはストアに接続されますが、小道具を取得する前に、接続によって適切な形式に変換されます。

  4. ????

4

0 に答える 0