Categories
Uncategorized

State Management in Angular 5.x using ngrx

state management

job-state.ts

Let us assume we have a job object with the following properties.

job-state.ts

Let us create actions classes by implementing the Action interface and then export them with type All, to avoid type mismatch errors.

job.reducer.ts

Now we need to create the reducer which maps the actions to the correct state.

app.component.ts

Now we need to include the reducer in the component, that we can to make use of this functionality. Here let us consider app.component.ts

job-state.interface.ts

We need to define the interface that the store uses to retrieve the state.

app.module.ts

Finally we need to add the reducer to the app.module.ts. There is a nice chrome plugin called redux dev-tools</ that comes in handy to view the current state of the application and manipulate it. You need add the StoreDevtoolsModule line as shown below, after installing and enabling the above plugin in your code.