Angular 4 + Redux (or ngrx/store) folder and file structure

Question

Ref to Angular official site's style guile of file structure:

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

If I would like to implement Redux (or ngrx/store) to my new Angular 4 project, would it be better to structure my application in this way?

    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

Or follow ngrx/store's example (https://github.com/ngrx/example-app), to structure the application in this way?

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

Is there any other better structure?

Answer 1

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