使用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

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

当在应用程序的几个SMART组件中使用减速器、动作或其他组件时,我发现了第一种结构非常适合一个相当小的应用程序。

尽管它促进了关注点的分离,但我发现在不同的目录之间跳转是相当乏味的。

通常,使用user.reducer.ts会涉及到使用其他文件:效果、操作等。因此,第二种方法似乎更整洁一些。

我想建议第三种可能适合的结构,以及在角度2中遵循"桶"方法的结构2:

- 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

通过这种结构,用户目录是一个桶,它暴露了各种逻辑组件,这些组件可以通过导入用户单独导入,即:

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

我正在我的开源媒体播放器应用程序Echoes player中尝试这些方法http://github.com/orizens/echoes-player
正如另一条评论中所提到的,这些应用于Echos播放器的策略和架构是在ngrx样式指南

中编译的

我遵循本指南了解最佳ngRx实践和结构:

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

你提到的第二种方式是最好的,因为(引用风格指南):

DO在reducer的目录中为以下内容创建单独的文件:reducer、reducer规范、reduceer操作和reducer选择器。最后,使用index.ts作为导出每个文件内容的桶。为什么在开发时更容易定位每个相关的类/文件

最新更新