Redux + Normalizr：正規化されたエンティティをRedux状態に追加して削除する

Question

入れ子になっているエンティティがたくさんあるAPIレスポンスがあります。私はnormalizrを使って還元状態をできるだけ平坦に保ちます。
たとえば、以下

const OpeningSchema = new schema.Entity('openings', { 
    tags: [new schema.Entity('tags')], 
    docs: [new schema.Entity('docs')] 
}); 

とは、それがその後、どのように見えるかです：下記のスキーマを使用してnormalizrを用いて正規化され

{ 
    "id": 1, 
    "docs": [ 
    { 
     "id": 1, 
     "name": "IMG_0289.JPG" 
    }, 
    { 
     "id": 2, 
     "name": "IMG_0223.JPG" 
    } 
    ], 
    "tags": [ 
    { 
     "id": "1", 
     "name": "tag1" 
    }, 
    { 
     "id": "2", 
     "name": "tag2" 
    } 
    ] 
} 

この応答：APIレスポンスは以下のようになります

{ 
    result: "1", 
    entities: { 
    "openings": { 
     "1": { 
      "id": 1, 
      "docs": [1,2], 
      "tags": [1,2] 
     } 
    }, 
    "docs": { 
     "1": { 
     id: "1", 
     "name": "IMG_0289.JPG" 
     }, 
     "2": { 
     id: "2", 
     "name": "IMG_0223.JPG" 
     } 
    }, 
    "tags": { 
     "1": { 
      "id": 1, 
      "name": "tag1" 
     }, 
     "2": { 
      "id": 2, 
      "name": "tag2" 
     } 
    } 
    } 
} 

還元状態は次のようになります。

私は tagを追加するアクションをディスパッチする場合

state = { 
    "opening" : { 
     id: 1, 
     tags: [1,2], 
     docs: [1,2] 
    }, 
    "tags": [ 
     { 
      "id":1, 
      "name": "tag1" 
     }, 
     { 
      "id":2, 
      "name": "tag2" 
     } 
    ], 
    "docs": [ 
     { 
      "id":1, 
      "name": "IMG_0289.JPG" 
     }, 
     { 
      "id":2, 
      "name": "IMG_0223.JPG" 
     } 
    ] 
} 

は今、それはstate.tagsにtagオブジェクトが追加されますが、それはstate.opening.tags配列を更新しません。タグを削除するときも同じ動作です。

私はopening,tagsおよびdocsを3種類のレデューサーで保ちます。

これは状態の不一致です。私は一貫性のある状態を維持するには、次の方法を考えることができます。

1. 私はタグを更新し、その後、両方の場所でtags減速とopening減速や更新タグの両方でそれを聞くためにアクションを派遣します。
2. タグを使用してopeningを更新するパッチ要求は、開始応答を返します。応答を正常化し、タグを設定したり、適切な一貫性を持って開くなどのアクションを再度呼び出すことができます。

これを行う正しい方法は何ですか。エンティティが関連するエンティティへの変更を監視し、変更を行うべきではありません。あるいは、そのような行動に従うことができる他のパターンがあります。

Answer 1

最初に、normalizrがどのように動作するかを要約します。normalizrは、スキーマによって定義されたエンティティへのネストされたAPI応答を平坦化します。したがって、最初のGET openings APIリクエストを作成すると、normalizrはレスポンスをフラット化し、Redux entitiesとフラット化されたオブジェクト：openings,docs、tagsを作成しました。

あなたの提案は実行可能ですが、私はnormalizrがUI状態からAPIデータを分離するのに本当のメリットがあることを発見しました。私は自分でReduxストアのデータを更新しません...すべての私のAPIデータはentitiesに保存されていて、私によって変更されていません。彼らはバニラのバックエンドデータです...私がしているのは、API操作の状態が変化したときにGETを実行し、GETの応答を正規化することです。 DELETEの場合は少し例外がありますが、後ほど詳しく説明します...ミドルウェアはこのようなケースを扱うため、使用していない場合はミドルウェアを使用してください。私は自分のミドルウェアを作成しましたが、私はredux-promise-middlewareが非常に人気があることを知っています。

上記のデータセットでは、新しいtagを追加するときは、API POSTを作成して、バックエンドを更新すると仮定します。次に、別のGET openingsを実行して、開口部とそのネストされたすべてのスキーマのentitiesを更新します。

tagを削除すると、 tag [2]の場合、DELETEリクエストをバックエンドに送信すると、エンティティ状態で削除されたオブジェクトを無効にする必要があります。 entities.tags[2] = nullを入力してから、再度normalizrエンティティを更新してください。