5

ネストされたエンティティが多数ある API 応答があります。私はnormalizrを使用して、redux の状態をできるだけフラットに保ちます。
たとえば。API の応答は次のようになります。

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

この応答はnormalizr、以下に示すスキーマを使用して正規化されます。

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

以下はそのときの様子です。

{
  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"
      }
    }
  }
}

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

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"
      }
  ]
}

を追加するアクションをディスパッチするとtagtagオブジェクトが追加されますが、配列state.tagsは更新されません。state.opening.tagsタグを削除するときも同じ動作です。

とを 3 つの異なるレデューサーで保持openingします。tagsdocs

これは状態の矛盾です。状態の一貫性を保つには、次の方法が考えられます。

  1. タグを更新するアクションをディスパッチし、tagsリデューサーとopeningリデューサーの両方でリッスンし、続いて両方の場所でタグを更新します。
  2. タグで開口部を更新するパッチ リクエストは、開口部の応答を返します。応答を正規化し、適切な一貫性を持ってタグやオープニングなどを設定するアクションを再度ディスパッチできます。

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

4

1 に答える 1