To solve the mess we are creating in app.module.ts, we will now use a method called forFeature() on StoreModule that will allow us to set up the states we need per feature module. Let's take the existing setup and refactor that:
// app.module.ts
StoreModule.forRoot({ }) // this would be empty
We move our two reducer entries to their respective feature modules, counter.module.ts and jedi.module.ts. That would now look like this:
// counter.module.ts
@NgModule({
imports: [StoreModule.forFeature(
// add reducer object here
)]
})
// jedi.module.ts
@NgModule({
imports : [StoreModule.forFeature(
// add reducer here
)]
})
We left out the implementation on purpose here because we need to take a step back. Remember when we called StoreModule.forRoot(), we could just pass it an object. It doesn't look quite the same with forFeature(). There is a little bit of difference, so let's try to explain what that difference is. We are used to setting up our store by passing it an object, which looks like this:
{
sliceOfState : reducerFunction,
anotherSliceOfState: anotherReducerFunction
}