In this section we will introduce redux and start converting our demo application to an NgRx powered application. We will skip strong typing and action creators till the next section.
Reducers are at the core of the redux pattern NgRx follows. We will have a reducer for each "slice" of state that we will combine into a single "store" that is literally just a JavaScript object.
This is a very simple reducer, but it follows the basic principles of a reducer. Reducers are just pure functions that take in state and a action (the instructions to change state) and return the new state for this slice of state.
Create a state folder with a spinner folder inside of it.
Create a spinner.reducer.ts file and add the below spinner state logic.
Here we register the reducer we made and name this slice of state "spinner". You will see this piece of state in the dev tools under a property called "spinner", when we add the dev tools in the coming sections.
Add NgRx to AppModule
src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/containers/home/home.component';
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { StoreModule } from '@ngrx/store';
import { InMemoryDataService } from './app.db';
import { reducer } from './state/spinner/spinner.reducer';
@NgModule({
declarations: [AppComponent, HomeComponent],
imports: [
BrowserModule,
RouterModule.forRoot([
{ path: '', pathMatch: 'full', redirectTo: 'home' },
{ path: 'home', component: HomeComponent },
{ path: 'event', loadChildren: './event/event.module#EventModule' }
]),
HttpClientModule,
HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService, { delay: 1000 }),
StoreModule.forRoot({ spinner: reducer })
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
4. Inject store into the EventComponent
As we move towards fully implementing NgRx you will see our components become even simpler with just a bunch of subscriptions to the store and actions being dispatched and work normally done in components now delegated to our NgRx system.