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

11
votes

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?

1
javascriptangularreduxngrx
Either use app/ or src/ as the app root folder... (src/app doesn't make sense unless you have like src/app2, src/app3, and in that case, is separate those apps into separate repos) - Denis Tsoi
I'd do it the first way, but it's just personal preference/opinion. Hence the close vote. - cartant
In the future, feature modules will be able to add their own reducers. For this reason, I have a dir in each module for it's store /app/feature/store, and it contains feature.actions.ts, feature.reducer.ts, and feature.selectors.ts - adharris
You may want to take a look to a github repo I've made to show how I like to do that : github.com/maxime1992/angular-ngrx-starter - maxime1992

1 Answers

4
votes

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