ReduxでUIとアプリケーションの状態を分離する方法

Question

react-reduxアプリケーションを記述するとき、アプリケーションとUIの両方の状態をグローバル状態ツリーに保持する必要があります。形状を設計する最良の方法は何ですか？

{ 
    items: [ 
    { id: 1, text: 'Chew bubblegum' }, 
    { id: 2, text: 'Kick ass' } 
    ] 
} 

は、今私は、ユーザーが項目を選択し、拡大させたい：

は、私がTODO項目のリストを持っていると言うことができます。ある状態の形状をモデル化する方法を二つのオプション（少なくとも）：

{ 
    items: [ 
    { id: 1, text: 'Chew bubblegum', selected: true, expanded: false }, 
    { id: 2, text: 'Kick ass', selected: false, expanded: false } 
    ] 
} 

しかし、これは、アプリケーションの状態とUIの状態（selectedとexpanded）を混合されます。サーバーにtodoリストを保存するとき、UI状態（実際のアプリケーションでは、UI状態にはモーダルダイアログの状態、エラーメッセージ、検証ステータスなどを含むことができる）ではなく、アプリケーション状態だけを保存します。

別のアプローチは、項目のUIの状態のための別の配列を維持することです：

{ 
    items: [ 
    { id: 1, text: 'Chew bubblegum' }, 
    { id: 2, text: 'Kick ass' } 
    ], 
    itemsState: [ 
    { selected: true, expanded: false }, 
    { selected: false, expanded: false } 
    ] 
} 

次に、あなたがアイテムをレンダリングする際に、これらの二つの状態を結合する必要があります。

1. ：itemsとitemsStateが同期を維持しなければならないため、

   const TodoItem = ([item, itemState]) => ...; 
   const TodoList = items => items.map(item => (<TodoItem item={item} />)); 
   
   export default connect(state => _.zip(state.items, state.itemsState))(TodoList); 
   

   しかし、状態の更新が痛みを伴うことができます：私はあなたがzipconnect機能でこれら二つの配列が容易なレンダリングを行うことができることを想像することができますアイテムを削除するときは、対応するitemStateを削除する必要があります。

2. アイテムを並べ替えるときは、itemsStateも並べ替える必要があります。
3. サーバーからToDo項目のリストが更新されるときには、UI状態でIDを保持し、何らかの調整を行う必要があります。

その他のオプションはありますか？または、アプリケーションの状態とUIの状態を同期させておくライブラリがありますか？

Answer 1

normalizrに触発された別のアプローチ：私は現在サイドプロジェクトのために、この時に自分自身を探しています

{ 
    ids: [12,11], // registry and ordering 
    data: { 
     11: {text: 'Chew bubblegum'}, 
     12: {text: 'Kick ass'} 
    }, 
    ui: { 
     11: { selected: true, expanded: false }, 
     12: { selected: false, expanded: false } 
    } 
} 

Answer 2

。私は上記のRickの方法と同様にアプローチします。データ{}は真理の源泉として役立ち、あなたはそれを使ってローカルな変更を（最新の状態を反映して）押し込みます。レンダリングする前にデータとUIを結合する必要があります。私は自分でいくつかの場所でそれを試みました。私は、同期を維持する限り、あまりにも悪くはないはずです。基本的には、データを保存/フェッチするたびに、次のユースケースに備えてデータ{}を更新し、ui {}をクリアします。