Reduxステートツリー構造： "形式/詳細量が異なる同じ種類のデータ"

Question

私はDan AbramovのイントロシリーズをEggHeadでやっており、現実世界のアプリで作業しています。ドメインは複雑なので、私は古典的な "ブログ"の例で実行します。

「インデックス/リスト」ページがあります。ここに表示する必要があるのは、ブログ投稿のタイトルと宣伝だけです。したがって、それを返すAPIエンドポイントがあり、それをblogs.byIdの状態ツリーに格納します。

ブログの投稿をクリックすると、実際にはより多くの情報が必要になります。ブログの全投稿、およびタグとカテゴリが表示されます。これを「メタデータを持つブログ」と呼ぶことにしましょう。

例を拡大すると、最新の3つのコメントを含むブログ投稿のリストを表示したい別の完全に別のページがあるかもしれません。これを「コメント付きのブログ」と呼ぶことにしましょう。

私の状態ツリーは、同じ「もの」を別の「形式」に保存しているこれらの別々の例をどのように扱うべきですか？私の最初の勘違いは完全に別のデータ型として扱うことになりますので、私の状態ツリーは例えばblogs.byId、blogsWithMetadata.byIdおよびblogsWithComments.byIdです。

そして、すべての単一のブログ記事はblogs.byIdセクションにキャッシュされている場合でも、我々はブログの記事を表示する必要がある分は、アプリが完全に暖かいblogs.byIdキャッシュすることを無視し、blogsWithMetadata.byIdでのみ見えます - 私たちは基本的にしたいですそれぞれ異なる情報量を持つブログデータの3つの別々のキャッシュを構築し、「ブログ」や「ウィジェット」のような完全に無関係なテーブルとして互いに無関係であるかのように扱う。

これは間違いありませんか？それとも良い方法がありますか？

アプリは現在、「フォーマット」に基づいて区別せずに、それらをすべて同じノードの下に置いてしまい、痛みの世界を引き起こしています。

Answer 1

これを行う方法は多分あります。その1つは、normalizrを使用してデータを構造化することです。正規化した後、次のようなものになります

{ 
    "id": "123", 
    "author": { 
    "id": "1", 
    "name": "Paul" 
    }, 
    "title": "My awesome blog post", 
    "comments": [{ 
    "id": "324", 
    "commenter": { 
     "id": "2", 
     "name": "Nicole" 
    } 
    }], 
    "tags": [{ 
    "id": "1", 
    "value": "awesome" 
    }, { 
    "id": "2", 
    "value": "journal" 
    }], 
    "categories": [{ 
    "id": "1", 
    "value": "personal" 
    }, { 
    "id": "2", 
    "value": "life" 
    }] 
} 

：：あなたのブログの記事は、このようなAPIによって返されたデータ構造を有する可能性が

その後

{ 
    entities: { 
    "post": { 
     "123": { 
     id: "123", 
     author: "1", 
     title: "My awesome blog post", 
     comments: ["324"], 
     tags: ["1", "2"], 
     categories: ["1", "2"], 
     } 
    }, 
    "users": { 
     "1": { "id": "1", "name": "Paul" }, 
     "2": { "id": "2", "name": "Nicole" } 
    }, 
    "comments": { 
     "324": { id: "324", "commenter": "2" } 
    } 
    "tags": { 
     "1": { id: "1", "value": "awesome" }, 
     "2": { id: "2", "value": "journal" }, 
    } 
    "categories": { 
     "1": { id: "1", "value": "personal" }, 
     "2": { id: "2", "value": "life" }, 
    } 
    } 
} 

を、あなたは状態を持つことができます各ページごとに：

{ 
    entities: {...}, 
    ui: { 
    blogs: { 
     posts: [1, 2], 
     hasComments: false, 
     // Displaying the blogs with or without comments 
     // could simply just be a boolean flag in state. 
    }, 
    } 
} 

reselect次に、ページコンポーネントに小道具として必要な投稿を渡すセレクタを作成します。