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
}