Angular 4 + Redux(或ngrx/store)文件夹和文件结构

Question

参考Angular官方网站的文件结构样式:

https://angular.io/docs/ts/latest/guide/style-guide.html#!#04-06

如果我想将Redux(或ngrx/store)实现到我的新Angular 4项目中,以这种方式构建我的应用程序会更好吗？

    project root

    ??? src/
    ?   ??? app/
    ?   ?  ???stores/
    ?   ?  ?  ??? heros/
    ?   ?  ?  ?  ??? heros.actions.ts|reducer|effects|store.ts
    ?   ?  ?  ? 
    ?   ?  ?  ??? ..../
    ?   ?  ?  ?  ??? .....
    ?   ?  ?  
    ?   ?  ??? containers/
    ?   ?  ?  ??? heros/
    ?   ?  ?  ?  ??? heros.component.ts|html|css|spec.ts
    ?   ?  ?  ?  ?  ??? ......
    ?   ?  ?  
    ?   ?  ?
    ?   ?  ??? components/
    ?   ?  ?  ??? hero-list/
    ?   ?  ?  ?  ?  ??? hero-list.component.ts|html|css|spec.ts
    ?   ?  ?  ?  ?  ??? .......
    ?   ?  ?  ??? ....

I have been using second structure but as my app grows, it was getting difficult to maintain, and then I refactored the structure in this way, the plus point of this structure is, if in future you decide to remove or edit ngrx all you need to do is remove or edit the stores folder.

Note:

- containers folder hold my smart components

- components folder hold my dumb components

或者按照ngrx/store的示例(https://github.com/ngrx/example-app),以这种方式构建应用程序？

    project root
    ??? src/
    ?   ??? app/
    ?   ?  ??? actions/
    ?   ?  ?  ??? hero.js
    ?   ?  ?  ??? hero-list.js
    ?   ?  ?  ??? ......
    ?   ?  ??? reducers/
    ?   ?  ?  ??? hero.js
    ?   ?  ?  ??? hero-list.js
    ?   ?  ?  ??? ......
    ?   ?  ??? components/
    ?   ?  ?  ??? heros/
    ?   ?  ?  ?  ??? hero/
    ?   ?  ?  ?  ?  ??? hero-list.component.ts|html|css|spec.ts
    ?   ?  ?  ?  ?  ??? ......
    ?   ?  ?  ?  ??? hero-list/
    ?   ?  ?  ?  ?  ??? hero-list.component.ts|html|css|spec.ts
    ?   ?  ?  ?  ?  ??? ......
    ?   ?  ?  ??? ......

还有其他更好的结构吗？

Answer 1

项目根目录

\n\n

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src/\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 app/\n\xe2\x94\x82   \xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80stores/\n\xe2\x94\x82   \xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 heros/\n\xe2\x94\x82   \xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 heros.actions.ts|reducer|effects|store.ts\n\xe2\x94\x82   \xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x82 \n\xe2\x94\x82   \xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x82\xe2\x94\x80\xe2\x94\x80 ..../\n\xe2\x94\x82   \xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 .....\n\xe2\x94\x82   \xe2\x94\x82  \xe2\x94\x82  \n\xe2\x94\x82   \xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 containers/\n\xe2\x94\x82   \xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 heros/\n\xe2\x94\x82   \xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 heros.component.ts|html|css|spec.ts\n\xe2\x94\x82   \xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 ......\n\xe2\x94\x82   \xe2\x94\x82  \xe2\x94\x82  \n\xe2\x94\x82   \xe2\x94\x82  \xe2\x94\x82\n\xe2\x94\x82   \xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 components/\n\xe2\x94\x82   \xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 hero-list/\n\xe2\x94\x82   \xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 hero-list.component.ts|html|css|spec.ts\n\xe2\x94\x82   \xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 .......\n\xe2\x94\x82   \xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 ....\n

\n\n

我一直在使用第二种结构，但是随着我的应用程序的增长，它变得越来越难以维护，然后我以这种方式重构了该结构，这种结构的优点是，如果将来您决定删除或编辑 ngrx 所需的一切要做的就是删除或编辑商店文件夹。

\n\n

笔记：

\n\n

\n

• 容器文件夹保存我的智能组件

\n

• 组件文件夹包含我的愚蠢组件

\n

\n