Introducing NgRx types for setting up the state

Up to this point, we have learned how we move the store state declaration from app.module.ts and register it in each  feature module instead. This will provide us with a little more order. Let's take a close look at the types used for registering state. ActionReducerMap is a type we have been using implicitly so far. We have been using it every time we call StoreModule.forRoot() or StoreModule.forFeature(). We have been using it in the sense that, the object we pass containing state and their reducers consists of this type. Let's prove that is the case by turning to our counter.module.ts:

// counter.module.ts

@NgModule({
imports: [
StoreModule.forFeature('counter',{
data: counterReducer
})
]
})

Let's change that a bit, to this:

// counter.reducer.ts

export interface CounterState = {
data: number
};

export reducer: ActionReducerMap<CounterState> = {
data: counterReducer
}

// counter.module.ts

@NgModule({
imports: [
StoreModule.forFeature('counter', reducer)
]
})

Now, we can see that we are leveraging ActionReducerMap, which is a generic that forces us to provide it with a type. In this case, the type is CounterState. Running this code should just work. So, why use ActionReducerMap explicitly like this?

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset