Redux状態の設計

Question

私はReduxを初めて使用しています。私は、私のアプリの状態設計を改良したい。 おおよそ私はユーザーが認識できる3ページを持っています。

• Page 1はの記事の印刷リストです。
• Page 2 の記事を編集しています。
• Page 3 の付録のリストと各付録のパラメータの編集はここにあります。

私はこのように設計しました。それは問題ありませんか？

{ 
    articles : [ 
     { 
      id, 
      title, 
      body, 
      appendixIds 
     }, 
     ... 
    ], 
    isFetchingArticles, 
    articlesPagination : { 
     pageSize, 
     pageIndex 
    }, 
    appendixes : [ 
     { 
      id, 
      title, 
      body, 
      configs 
     } 
    ], 
    isFetchingAppendixes, 
    appendixesPagination: { 
     pageSize, 
     pageIndex 
    } 
} 

Answer 1

州の設計が通訳まで、多くの場合で、しかし、助けることができる何かが、あなたのレデューサーを設定する方法について考えています。

combineReducersを使用している場合、状態は、それに渡される各レデューサーの1つのオブジェクトに分割されます。ですから、記事や付録のために別のもの減速を持っている場合たとえば、その後、combineReducersを使用してから結果の状態は次のようになります。

これを使用して

{ 
    articles: { 
    .... 
    }, 
    appendices: { 
    ... 
    } 
} 

、より有益何ができるか、あなたを設定することですこのような状態：

{ 
    articles: { 
     items: [ 
     { 
      id: x, 
      title: x, 
      body: x, 
      appendices: x 
     }, 
     ... 
     ], 
     isFetching: false, 
     pagination: { 
     size: x, 
     index: x 
     } 
    }, 
    appendices: { 
    ... 
    } 
} 

または、normalizr https://github.com/paularmstrong/normalizrを見てみましょう。 これは状態ツリーを正規化するため、記事の中のappendixIdsのような他のオブジェクトへの参照に使用できます。