Reduxの：整理コンテナ、コンポーネント、アクション、および減速

Question

質問：

大 React/Reduxアプリケーションでのコンテナ、コンポーネント、アクションや減速を整理するための最も保守性と推奨されるベストプラクティスは何ですか？

私の意見：

現在の傾向は、関連するコンテナコンポーネントの周りに（...アクション、レデューサー、サガ）Reduxの担保を整理するように見えます。例えば

/src 
    /components 
     /... 
    /contianers 
     /BookList 
      actions.js 
      constants.js 
      reducer.js 
      selectors.js 
      sagas.js 
      index.js 
     /BookSingle 
      actions.js 
      constants.js 
      reducer.js 
      selectors.js 
      sagas.js 
      index.js   
    app.js 
    routes.js 

これは素晴らしい機能です。このデザインにはいくつかの問題があるようですが。

問題：

我々はそれがアンチパターンと思われる他の容器からactions、selectorsまたはsagasにアクセスする必要がある場合。たとえば、カテゴリーや列挙型など、アプリ全体で使用する情報を格納する減縮/状態のグローバル/Appコンテナがあるとします。状態ツリーで、上記の例に続き：

{ 
    app: { 
     taxonomies: { 
      genres: [genre, genre, genre], 
      year: [year, year, year], 
      subject: [subject,subject,subject], 
     } 
    } 
    books: { 
     entities: { 
      books: [book, book, book, book], 
      chapters: [chapter, chapter, chapter], 
      authors: [author,author,author], 
     } 
    }, 
    book: { 
     entities: { 
      book: book, 
      chapters: [chapter, chapter, chapter], 
      author: author, 
     } 
    }, 
} 

我々は（確かに間違っている？）私たちはどちらか/BookList/selectors.jsでそれを再作成する必要が私たちの/BookListコンテナ内/Appコンテナからselectorを使用するか、それをインポートする場合/App/selectorsから（これは常にEXACTの同じセレクタですか？いいえ）。これらのappraochesはどちらも私にとっては最適ではないようです。

このユースケースの主な例は、VERY共通の「副作用」モデルであるため、認証（ああ...あなたが嫌い​​なのは大変です）です。アプリ全体に/Authサガ、アクション、セレクタにアクセスする必要があることがよくあります。実際に我々のアプリでは、/Auth contianerには実際のコンポーネントはありません！

/src 
    /contianers 
     /Auth 
      actions.js 
      constants.js 
      reducer.js 
      selectors.js 
      sagas.js 

上記のさまざまな、しばしば無関係な認証コンテナのすべてのRedux付属品を単に含むだけです。

Answer 1

私は個人的にducks-modular-redux提案を使用します。

「公式」推奨の方法ではありませんが、それは私にはうってつけです。各「アヒル」は、actionTypes.js,actionCreators.js,reducers.js,sagas.jsおよびselectors.jsファイルを含む。これらのファイルには、循環的な依存関係を避けるための依存関係はありません。duck circle、各 "duck"には管理する必要のあるロジックのみが含まれています。

components/フォルダ私のアプリのすべての純粋な成分が

containers/フォルダから作成されたコンテナが含まれて含まれています。私はcomponentsとcontainersフォルダといくつかのルートファイルが持っているルートに続いて

、上記の純粋な成分。コンテナに多くの "アヒル"を含む特定のselectorが必要な場合は、<Container/>コンポーネントを書いたのと同じファイルに記述します。このコンテナはこの特定のコンテナに関連しているためです。 selectorが複数のコンテナに共有されている場合、別のファイル（またはこれらの小道具を提供するHoC）で作成します。

rootReducers.jsは：

/* let's consider this state shape 

state = { 
    books: { 
     items: { // id ordered book items 
      ... 
     } 
    }, 
    taxonomies: { 
     items: { // id ordered taxonomy items 
      ... 
     } 
    } 
} 

*/ 
export const getBooksRoot = (state) => state.books 

export const getTaxonomiesRoot = (state) => state.taxonomies 

：単にあなたのようなものを持っている可能性があり、あなたの場合には、たとえば、

rootSelectors.jsは、状態の各スライスのルートセレクタを公開するすべての減速を組み合わせることにより、ルート減速を公開します

各アヒルselectors.jsファイル内の状態の形状を「隠す」ことができます。それぞれのselectorはあなたのアヒルの中に全体の状態を受け取るので、あなたのselector.jsファイルに対応するrootSelectorをインポートするだけです。

rootSagas.jsはとは、多くの「カモ」を含む複雑なフローを管理するあなたのアヒル内のすべてのサガを構成します。

だからあなたの場合には、構造は次のようになります。

components/ 
containers/ 
ducks/ 
    Books/ 
     actionTypes.js 
     actionCreators.js 
     reducers.js 
     selectors.js 
     sagas.js 
    Taxonomies/ 
     actionTypes.js 
     actionCreators.js 
     reducers.js 
     selectors.js 
     sagas.js 
rootSelectors.js 
rootReducers.js 
rootSagas.js 

私の「カモ」が十分に小さいとき、私は多くの場合、フォルダの作成をスキップして、直接これらすべての5つのファイルとducks/Books.jsまたはducks/Taxonomies.jsファイルを書き込みます（actionTypes.js,actionCreators.js,reducers.js,selectors.js,sagas.js）を併合した。