I've encountered an issue while using NGRX to store a simple object. When the object is added to the state tree, the reducer's name is also included, causing problems when I try to strongly type my selector and subscribe to it.
Here is the code snippet:
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 to get the current object
this.store.select(getCurrentSkick).subscribe((skick) => {
this.skickPlayer = skick;
if (this.skickPlayer) this.performFrame(0);
});
}
The problem arises because NGRX is appending the name of the reducer to the tree, as shown in this image: https://i.sstatic.net/8jjQz.png
Any insights on why accessing the object from the subscription fails due to this "reducer" naming convention in the tree? Ideally, the object structure in the tree should be Player.currentSkick instead of player.reducer.currentSkick