Integrate ngrx into my code

Question

I'm trying to get how to add ngrx into my current project structure.

I've got all concepts around ngrx/reflux. Nevertheless, I don't quite figure out how to rebuild project structure in order to integrate it into my project.

1. Where do I need to add reducers?
2. Where do I need to add states?
3. What about actions?
4. Where should Store be, on a service, injected in each component?
5. Where or when the data should be fetched from server?

Is there any project structure best practice over there?

Answer 1

First, you should take a look into @ngrx/store documentation : https://github.com/ngrx/store#setup

I've made a small (funny) project to demonstrate how to use :
- angular
- ngrx/store
- ngrx/effects
- normalized state
- selectors

You can find it here : https://github.com/maxime1992/pizza-sync

---

To give you some info about how it works :
- core.module.ts is were I declare my root reducer
- root.reducer.ts is were I build the root reducer and compose it with middlewares according to dev/prod env
- For a reducer, I keep every related part together (interface(s) + reducer + effects + selectors)

Then within a component, to access the store simply do like that :
Inject the store :

constructor(private _store$: Store<IStore>) { }

Get data from either
a) A selector (ex)

this._pizzasCategories$ = this._store$.let(getCategoriesAndPizzas());

b) Directly from the store (ex)

this._idCurrentUser$ = this
      ._store$
      .select(state => state.users.idCurrentUser);

Notice that I didn't subscribe which means I'm using in my view the async pipe so angular subscribe to the Observable for me.

But of course you can also do it by hand and use subscribe in your ts.

---

PS: I'll be releasing a starter with all that already setup to avoid loosing time with all of that when starting a new project. I'll try to release it this week and I'll update this post as soon as it's done. Maybe it might help you.

EDIT 12/05/17
Late but I finally released the starter :) !
https://github.com/maxime1992/angular-ngrx-starter