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

Question

引用Angular官网的文件结构风格:

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

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

    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

项目根

├── 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
│   │  │  │  │  └── .......
│   │  │  ├── ....

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

注意:

• containers 文件夹存放我的智能组件

• components 文件夹存放我的dumb组件