2016-07-21 123 views
6

结构1使用ngrx的应用程序的最佳结构是什么?

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 
+0

您能否使用您的代码添加更多注释 –

+4

我个人喜欢第一种方法。这是ngrx团队在其示例应用程序中使用的结构。除此之外,你还有一个接口或类的文件夹,并且经常会发生这样的情况:你在多于一个reducer上使用相同的接口。您还经常在多于一种效果上使用相同的操作等等。这就是为什么我更喜欢第一个结构。 –

回答

4

我已经在一个应用程序的几款智能组件使用减速机,行动或别人的时候发现适合为好一个相当小的应用程序的第一个结构。

虽然它促进了关注的分离,但我发现在各个目录之间跳转非常繁琐。

通常,与user.reducer.ts一起工作会涉及到处理其他文件:效果,操作等等。所以,第二种方法似乎更整齐一些。

我想建议,可能适合第三结构和一个跟随在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 

在这种结构中,用户目录是暴露的各种桶这可以只通过导入用户分别导入逻辑组件,即:

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

我在我的开源媒体播放器应用这些方法的实验 - Echoes Player - http://github.com/orizens/echoes-player
作为另一则留言中提到,这些战略和架构应用于呼应玩家汇集在ngrx styleguide

+0

这就是我的想法。 –

+0

我倾向于同样的方式。但是,基于特征的划分(对我而言)的一个大问题是,某些特征取决于其他特征。每次它发生时,我都会打断我的头脑,想知道如何将它们分离成最干净的。 – Michael

1

我按照本指南最佳NGRX做法和结构:

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

第二种方式你(引自风格指南):

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

相关问题