Redux + Normalizr detached（deleted）操作

Question

私はreduxをnormalizrで使用してサーバーからの応答を正規化します。基本的にreal-worldの例に従ってください。この方法でentities減速機は非常に簡単です、ちょうど応答をマージします。今私が持っている問題は、delete操作のようなものです。私はこれを見つけましたissue#21 of normalizr repoしかし、これを解決する方法をまだ理解できませんでした。例えば、

現在の状態が

{ 
    entities: 
    product_categories: { 
     ... 
     13: { 
     ... 
     products: ["1", "2"], <--------------- [i] Current state 
     ... 
     } 
    }, 
    products: { 
     1: { 
     id: "1" 
     } 
    } 
} 

正規化された応答は、あなたが見ることができるように、バックエンドAPIはちょうどで、このカテゴリに属しすべての製品IDを返し

{ 
    ... 
    product_categories: { 
     ... 
     13: { 
     ... 
     products: ["1"], <---------------- [2] Normalized result 
     } 
    ... 
} 

ですこの場合「2」が切り離される。 'エンティティ'レデューサーがこのレスポンスをマージすると、「2」は依然としてハングしています。今はページをリロードするだけですが、このケースを処理するにはより良い方法があるのだろうかと思います。

entitiesでは、実際の例のようにマージします。

return merge({}, state, action.payload.entities);

Answer 1

ちょうどそれがそこにあることについて心配しないでください。あなたの状態をデータベースと考えてください。複雑なカスケードを回避するために、データベースからレコードを削除することは本当にありません。通常、データベース内のステータスを変更するだけです。同様に、ノーマライザでは、本当にエンティティを削除するのではなく、ユーザーがページを離れるまでキャッシュに置くようにしてください！

Answer 2

以下は、私の解決策とそれに続くコードの説明です。

削除を実行するには、私のレデューサーを削除アクションの処理に更新しました：REMOVE_ENTITY_ITEM。私は、取り除かれるエンティティのidとnameを渡します。

還元剤では、まず、store.entities[entityName][entityId]にあるエンティティ自体を削除します。次に、それを参照しているかもしれない他のすべてのエンティティからそのidを削除する必要があります。私はnormalizrを使用しているので、すべてのエンティティはフラットであり、別のエンティティを参照すると、そのIDは配列内にのみ存在します。これにより、参照を削除するのが比較的簡単になります。私はすべてのエンティティをループし、削除されるエンティティへの参照をフィルタリングします。

私はこのアプローチを＃1の他の2つのアプローチと併用しています。UIの中のオフになっている項目を削除してからフィルタリングするのではなく、エンティティのステータスビットを反転してアプリと状態をリフレッシュします。

store.dispatch({ 
    type: "REMOVE_ENTITY_ITEM", 
    meta: { 
    id: 1, 
    name: "job_titles" 
    } 
});