Reduxの店 - データベース - 私は2つのリスト持っている私のangular4アプリで変更

Question

伝播する方法：「XYSの友人のリストを」 「私の友人のリストを」との

私は表示するので、私は、店に両方のリストを追加しましたそれらを異なるコンポーネントに分けて、私はすべての異なるコンポーネントが私のリストの変更を即座に実現したいと思っています。

友人が "名前"を変更した場合、私は2点で店を更新する必要があるという問題があります。 「私の友人のリスト」と「友人のリスト」に。これは、間違って混乱していると感じて追跡するのが難しいです。

もう1つの方法は、データベースの「名前」を更新してから、「友人のリスト」と「友人のリスト」の新しいバージョンを再度要求することです。

しかし、これには多くの時間がかかります。

これに専門的なアプローチは何ですか？どうもありがとうございました！

Answer 1

データストア（特にReduxストア）をフラットにすることをお勧めします。通常、ネストの量は最小限に抑えられ、エンティティはIDで相互参照する必要があります。

この例で詳しく説明します。現在のところ、データは次のようになります。

{ 
    allUsers: [ 
     { 
      id: 1, 
      name: 'Foo', 
      friends: [ 
       { 
        id: 2, 
        name: 'Bar', 
       }, 
       { 
        id: 3, 
        name: 'Baz' 
       } 
      ] 
     }, 
     { 
      id: 2, 
      name: 'Bar', 
      friends: [ 
       { 
        id: 3, 
        name: 'Baz' 
       } 
      ] 
     }, 
     { 
      id: 3, 
      name: 'Baz', 
      friends: [] 
     } 
    ] 
} 

ご覧のとおり、多くのネスティングと複製があります。しかし、この構造を平坦化すれば、はるかに良くなります。

{ 
    users: { 
     1: { 
      id: 1, 
      name: 'Foo', 
      friends: [2, 3] 
     }, 
     2: { 
      id: 2, 
      name: 'Bar', 
      friends: [3] 
     }, 
     3: { 
      id: 3, 
      name: 'Baz', 
      frineds: [] 
     } 
    }, 

    allUsers: [1, 2, 3] 
} 

各エンティティは1つの特定の場所に格納されています。他のエンティティはデータを含めることはできませんが、idで参照するだけで、変更を同期する必要はありません。このアプローチは、データの完全性（あなたのものを含む）に関する多くの問題を防ぎ、アプリケーションのメモリフットプリントを最小限に抑えます。