NGRX

Question

我正在使用 NGRX 来存储一个简单的 object，但是当 object 添加到状态树时，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,
    };
   }
  )
 );

选择器：

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

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

操作：

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

功能模块：

@NgModule({

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

应用程序模块：

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

Skick 界面：

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

和组件：

  //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);
  });

  }

因为 ngrx 正在将 reducer 的名称添加到树中，如下图所示：

尝试从订阅中读取 object 时失败，因为“reducer”名称已固定在树中。知道为什么吗？树中 object 的结构应该是 Player.currentSkick 而不是 player.reducer.currentSkick

Answer 1

在你的模块中，如果你像这样导入减速器

import * as fromMyFeature from 'somewhere.reducer';

你应该像这样使用导入部分：

@NgModule({

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

NGRX - 为什么将 Reducer 名称添加到状态树中？

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

angular

typescript

ngrx-store