Why reducer does not seem to fire in ngrx? How to wire in the reducer to the store? - ngrx

Question

I am trying to dispatch the addHero action in my service:
I see the "obtaining" and "dispatched" messages for each Hero,
but the reducer does not seem to be called.
This is called from an ngOnInit hook.
What is the obvious thing I overlook?
Update: I have wrapped the appReducer to a function which logs each reducer call and then calls the real reducer. I neither see the log of it, so probably I am missing something about how to wire in the reducer.
My attempt was this line in the imports part of module.ts:
StoreModule.forRoot(appReducer)
(end of update)
export class GetTheActualListOfHeroesService {
store: Store<AppStore>;
run(): void {
console.log("GetTheActualListOfHeroesService")
obtainHeroesService().forEach(hero => {
console.log("obtaining", hero)
this.store.dispatch(addHero(hero))
console.log("dispatched")
}
)
};
constructor(appStore: Store<AppStore>) {
this.store = appStore;
}
}
The reducer is below. I do not see "addHero" in the log.
export const initialState: AppStore = {
heroes: [],
filterString: "",
selectedHero: undefined
}
export const appReducer = createReducer(
initialState,
on(addHero, (state: AppStore, hero) => {
console.log("addHero", hero)
state.heroes.push(hero);
console.log(state)
return state;
}),
);
The action is defined thus:
export const addHero = createAction('add Hero', props<Hero>());
And here is my module definition:
#NgModule({
declarations: [
HeroesComponent,
HeroeditorComponent,
HeroitemComponent,
HeroListComponent,
HeroFilterComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
StoreModule.forRoot(appReducer)
],
providers: [
SelectedHeroRepository,
HeroFilterRepository,
GetTheActualListOfHeroesService,
IsThisHeroSelectedForEditingService,
SelectHeroForEditingService,
InitializeStatesService,
SelectHeroesWithMatchingNamesService,
],
bootstrap: [HeroesComponent]
})
export class Angulartest { }

Answer 1

The solution was this:
StoreModule.forRoot({ heroes: appReducer })
And the reducer became:
export const initialState: Heroes = []
export const appReducer = createReducer(
initialState,
on(addHero, (state: Heroes, hero) => {
console.log("addHero", hero)
const newstate = state.concat([hero])
console.log(state)
return newstate;
}),
);