Set Up ngrx Store for an Application Feature
The first step to migrating to state management with ngrx store for a feature is to instrument that feature with a basic reducer and then wire it into the top-level reducer which is registered with an Angular module. In this lesson, we are going to show how to define the shape of your feature state with an interface, define initial state and then set up the most basic reducer possible to work with the store. We will then add our newly minted reducer to the top-level reducer which then registers it with our state module. From there, we will modify our feature component to hydrate itself from the store and not from a service call.
Do not understood why do we need to export state in index.ts if we already added it as module refference inside app.module.
Good question Nick! We need to export it in index.ts so that it gets bundled at the language level. This eventually gets resolved when by the end of the series but definitely a confusing thing when we are dealing with modules at a framework AND language level.
Thanks a lot, Lukas. I was able to meet flux in vue.js, but vuex is a little bit different from ngrx, aso I will try to learn ngrx by your tutorial. Thanks for a good work!
Thanks Nick!
Hey Nick. You build a map and setup reducers using StoreModule.forRoot
I assume you can also individually setup reducers for a state using StoreModule.forFeature
For example,
StoreModule.forRoot(mapOfReducers) or StoreModule.forFeature('projects', fromProjects.projectsReducer), StoreModule.forFeature('customers', fromCustomers.customersReducer),
Does it matter which way you want to set it up?
What is a barrel roll? (First time I've heard that term)
Great question! The idea is that you export everything in a single index.ts which allows you condense your imports to look like import { A, B, C } from ./somewhere instead of having to import everything one by one on a new line. You are essentially rolling up your imports into a single file. Hope this makes sense!
Hi Lukas, Please how did you generate the state module? was it a regular ng Module? I can't find it in the github code as well. Thanks
Hi Lukas, I am having trouble with selecting the store slice 'projects' and then mapping it to the projects list. The code from projects.component.template:
this.projects$ = store.pipe(
select('projects'),
// Typescript believes the result so far is type Observable<Projects[]>
map((p: ProjectsState) => p.projects)
)The problem is that TypeScript is thinking that the operator <b>select('projects')</b> is returning an Observable of type <b>"Observable<Project[]>"</b> rather than type <b>"Observable<ProjectsState>"</b> and so will not compile if I try use the map operator map(p => p.projects).
Do you know where the <b>select('projects')<b> is getting this wrong type assertion? And how to fix it?
Thank you very much.
Hi @Nathan - can you put your code into a Stackblitz so I can take a look? Thanks!
unfortunately ng serve does not work