NGRX - Why the Reducer Name added to the state tree?

Question

I am using NGRX to store a simple object, but when the object is added to the state tree, the name of the reducer is added too, which generates issues when I strongly type my selector and subscribe to it

The code looks as follow:

Reducer:

  export interface State extends AppState.State {
   player: PlayerState;
  }

 export interface PlayerState {
  currentSkick: ISkick;
  }

 export const initialState: PlayerState = {
 currentSkick: null,
 };

 export const reducer = createReducer<PlayerState>(
  initialState,
  on(
   PlayerActions.setCurrentSkick,
   (state, action): PlayerState => {
    return {
     ...state,
     currentSkick: action.skick,
    };
   }
  )
 );

Selector:

const getCurrentSkickFeaturesState = createFeatureSelector<PlayerState >(
 'player'
);

export const getCurrentSkick = createSelector(
   getCurrentSkickFeaturesState,
   (state) => state.currentSkick
 );

Actions:

export const setCurrentSkick = createAction(
  '[Player] Set Current Skick',
   props<{ skick: ISkick }>()
 );

Feature Module:

@NgModule({

 imports: [
   StoreModule.forFeature('player', { reducer }),
  ],
})
export class SkickPlayerModule {}

App Module:

@NgModule({
declarations: [AppComponent ],
imports: [
BrowserAnimationsModule,
StoreModule.forRoot({}, {}),
StoreDevtoolsModule.instrument({
name: 'player',
maxAge:25,
logOnly: environment.production
})],
})
export class AppModule {}

Skick Interface:

export interface ISkick {
  fileVersion: string;
  formatVersion: string;
   title: string;
   author: string;
   authorEmail: string;
   creationDate: Date;
   uniqueId: string;
   thumbnailLink: string;
   frames: Frame[];
    assets: Assets;
 }

and The Component:

  //Dispatch the action set the current object
  async loadSkick(zip: JSZip) {
    let skickPlayer = await this.getFileToText(zip);  
    this.store.dispatch(PlayerActions.setCurrentSkick({ skick: skickPlayer }));
  }

 ngOnInit(): void {   

 //Subscribe the get the current object
  this.store.select(getCurrentSkick).subscribe((skick) => {
       this.skickPlayer = skick;
     if (this.skickPlayer) this.performFrame(0);
  });

  }

because of the fact ngrx is adding the name of the reducer to the tree as the following image depicts:

When trying to read the object from the subscription it fails because that "reducer" name has been pin in the tree. Any idea why? The structure of the object in the tree should be Player.currentSkick and not player.reducer.currentSkick

Can you post the module where you register your reducer with the StoreModule, such as where you call StoreModule.forRoot() or StoreModule.forFeature()? — Aaron Adrian

alou alou · Accepted Answer · 2020-07-21T17:17:05

In your modules, if you import the reducer like

import * as fromMyFeature from 'somewhere.reducer';

You should use the import part like this:

@NgModule({

 imports: [
  StoreModule.forFeature('player', fromMyFeature.reducerExportName),
 ],
})
export class SkickPlayerModule {}

NGRX - Why the Reducer Name added to the state tree?

1 Answers