web-dev-qa-db-ja.com

ngrxを使用するアプリに最適な構造は何ですか？

構造1

reducers
   index.ts //Combine all reducers
   user.reducer.ts
   product.reducer.ts
actions
   index.ts  //Combine all actions
   user.action.ts
   product.action.ts
effects
   index.ts //Combine all effects
   user.effect.ts
   product.effect.ts
selector
   //Combine all selectors
   user.selector.ts
   product.selector.ts

OR

user
  user.reducer.ts
  user.action.ts
  user.effect.ts
  user.selector.ts
product
  product.reducer.ts
  product.action.ts
  product.effect.ts
  product.selector.ts
reducers.ts //Combine all reducers
actions.ts //Combine all actions
effects.ts //Combine all effects
selectors.ts //Combine all selectors
angularngrx
17
Tuong Le

アプリ内のいくつかのSMARTコンポーネントでレデューサー、アクションなどを使用する場合、かなり小さなアプリに適した最初の構造を見つけました。

関心の分離を促進しますが、さまざまなディレクトリ間を移動するのはかなり面倒です。

通常、user.reducer.ts、他のファイル（効果、アクションなど）の操作が含まれます。したがって、2番目のアプローチはもう少し整頓されているように見えます。

適合する可能性のある3番目の構造と、angular2の「バレル」アプローチに従う構造を提案したいと思います。

- store
    - user
        - index.ts
        - user.actions.ts
        - user.effects.ts
        - user.reducer.ts
        - user.reducer.spec.ts

    // the store definition file - will expose reducer, actions etc..
    // for connecting those to the app in the bootstrap phase
    - index.ts

この構造では、userディレクトリは、ユーザーをインポートするだけで個別にインポートできるさまざまなロジックコンポーネントを公開するバレルです。

import { reducer as UserReducer } from '../store/user'; 
// or
import { UserReducer } from '../store/user'

私はオープンソースのメディアプレーヤーアプリでこれらのアプローチを実験しています- Echoes Playerhttp://github.com/orizens/echoes-player
別のコメントで述べたように、エコープレーヤーに適用されるこれらの戦略とアーキテクチャは ngrx styleguide にコンパイルされています。

15
Oren Farhi

NgRxのベストプラクティスと構造については、このガイドに従います。

https://github.com/orizens/ngrx-styleguide

あなたが言及した2番目の方法は（スタイルガイドから引用して）次の理由で最良です：

[〜＃〜] do [〜＃〜]レデューサーのディレクトリに、レデューサー、レデューサーの仕様、レデューサーのアクション、およびレデューサーのセレクター用に個別のファイルを作成します。最後に、index.tsを各ファイルのコンテンツをエクスポートするためのバレルとして使用します。 なぜですか？開発時に関連する各クラス/ファイルを見つけるのが簡単です

3
Dolan