ネストされたエンティティが多数ある 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"
}
]
}
を追加するアクションをディスパッチするとtag
、tag
オブジェクトが追加されますが、配列state.tags
は更新されません。state.opening.tags
タグを削除するときも同じ動作です。
とを 3 つの異なるレデューサーで保持opening
します。tags
docs
これは状態の矛盾です。状態の一貫性を保つには、次の方法が考えられます。
- タグを更新するアクションをディスパッチし、
tags
リデューサーとopening
リデューサーの両方でリッスンし、続いて両方の場所でタグを更新します。 - タグで開口部を更新するパッチ リクエストは、開口部の応答を返します。応答を正規化し、適切な一貫性を持ってタグやオープニングなどを設定するアクションを再度ディスパッチできます。
これを行う正しい方法は何ですか。エンティティは、関連するエンティティへの変更を監視して、変更自体を行うべきではありません。または、そのようなアクションに従うことができる他のパターンがあります。