We can set it up in pretty much the same way, but we need to pass it the name of a feature as well. Let's take our counter.module.ts and add a little code to it:

// counter.module.ts

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

This will change how we select our state, though. Imagine we are inside of counter.component.ts with the current implementation looking like the following:

// counter.component.ts

@Component({
  selector: 'counter',
  template: `{{ counter$ | async }}`
})
export class CounterComponent {
  counter$;

  constructor(private store: Store<AppState>) {
    // this needs to change..
    this.counter$ = this.store.select('counter');
  }
}

Because we changed what the state looked like in counter.module.ts, we now need to reflect that in counter.component.ts, like so:

// counter.component.ts
@Component({
  selector: 'counter',
  template: `{{ counter$ | async }}`
})
export class CounterComponent {
  counter$;

  constructor(private store: Store<AppState>) {
    this.counter$ = this.store.select((state) => {
      return state.counter.data;
    });
  }
}