时间戳

首页 > 解决方案 > Angular ngrx 8 选择器不返回任何值

angular - Angular ngrx 8 选择器不返回任何值

问题描述

我不是 Angular 的新手，但我是 ngrx 的新手。我正在尝试从我的服务器获取一些值并将它们简单地打印到屏幕上，我可以看到这些值从服务器返回，之后效果捕获了动作并完成了它的工作：

在此处输入图像描述

但是我的简单组件没有显示任何内容：

ProfileComponent.ts：

export class ProfileComponent implements OnInit {
  network$= this.store.select(a=>a.NetworkInfo)
  profiles$: Observable<Profile[]> = this.store.select(state => state.Profiles);
  constructor(private store:Store<NetAlertState>) { }

  ngOnInit() {
    this.store.dispatch({ type: '[Profile Component] getAllProfiles' });
    this.store.dispatch({ type: '[Profile Component] getNetworkInfo' });    
  }

}

profile.component.html：

    <div *ngFor="let profile of profiles$ | async">
    {{ profile.name }}
    </div>

网络警报.actions.ts：

export const getAllProfiles = createAction('[Profile Component] getAllProfiles');
export const getNetworkInfo = createAction('[Profile Component] getNetworkInfo');
export const loadProfilesSuccess = createAction('[Profile Component] loadProfilesSuccess',props<{items:Profile[]}>());
export const loadNetworkInfoSuccess = createAction('[Profile Component] loadNetworkInfoSuccess', props<NetworkInfo>());
export const loadProfilesFailure = createAction('[Profile Component] loadProfilesFailure',props<String>());
export const loadNetworkInfoFailure = createAction('[Profile Component] loadNetworkInfoFailure',props<String>());

网络警报.reducer.ts

    export const initialState: NetAlertState = {
    Profiles:null,
    NetworkInfo:null,
    isLoading: false,
    error: null
}

export const NetAlertReducer = createReducer(
    initialState,
    on(NetAlertActions.getAllProfiles, state => ({ ...state,isLoading:true ,error:null})),
    on(NetAlertActions.loadProfilesSuccess, (state,profiles) => ({ Profiles:profiles,...state ,isLoading:false ,error:null})),
    on(NetAlertActions.loadProfilesFailure, (state,err) => ({ ...state,isLoading:false ,error:err})),
    on(NetAlertActions.getNetworkInfo, state => ({ ...state ,isLoading:true ,error:null})),
    on(NetAlertActions.loadNetworkInfoSuccess, (state,res) => ({ ...state,NetworkInfo:res,isLoading:false ,error:null})),
    on(NetAlertActions.loadNetworkInfoFailure, (state,err) => ({ ...state,isLoading:false ,error:err})),
  );



export function reducer(state: NetAlertState | undefined, action: Action) {
    return NetAlertReducer(state, action);
  }

网络警报.effects.ts：

@Injectable()
export class NetAlertEffects {

    loadProfiles$ = createEffect(() =>
     this.actions$.pipe(
        ofType('[Profile Component] getAllProfiles'),
        mergeMap(() => this.dataService.getAllProfiles()
          .pipe(
            map(res => ({ type: '[Profile Component] loadProfilesSuccess', payload: res })),
            catchError(() => of({ type: '[Profile Component] loadProfilesFailure' }))
          )
        )
      )
  );

  constructor(
    private actions$: Actions,
    private dataService: DataService
  ) {}
}

网络警报.state.ts：

  export interface NetAlertState {
     isLoading: boolean;
     error: any;
     NetworkInfo: NetworkInfo;
     Profiles: Profile[];
 }

 export interface Profile {
  Mac: string;
  NickName: string;
  CreateDate: Date;
  Sites?: any;
}

根状态.ts：

export interface AppStates {
  netAlert: NetAlertState;
}

export const netAlertReducers: ActionReducerMap<AppStates> = {
    netAlert: netAlertRerucers.reducer
 };

app.module.ts：

  @NgModule({
  declarations: [
    AppComponent,
    ProfileContainerComponent,
    ProfileComponent
  ],
  imports: [
    HttpClientModule,
    BrowserModule,
    AppRoutingModule,
    StoreModule.forRoot(netAlertReducers),
    EffectsModule.forRoot([NetAlertEffects]),
    StoreDevtoolsModule.instrument({
      maxAge: 25, // Retains last 25 states
      logOnly: environment.production, // Restrict extension to log-only mode
    }),
    RootStoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

有人能告诉我我的错误在哪里吗？

非常感谢！

标签： angulartypescriptecmascript-6reduxngrx

解决方案

如果你没有一个 reducer 来从loadProfilesSuccessaction 中更新你的 state，它就不会起作用。就像是：

const myReducer = createReducer(
  initialState, // type NetAlertState
  on(from.loadProfilesSuccess, (state, action) => {
     // return new state from action payload
  }),
)

export function reducer(state: NetAlertState, action: Action) {
    return myReducer(state, action);
}

您有操作，但您也从未使用过它们。你应该在任何地方使用它们：

ngOnInit() {
    this.store.dispatch(getAllProfiles());
    this.store.dispatch(getNetworkInfo());
}

loadProfiles$ = createEffect(() =>
     this.actions$.pipe(
        ofType(getAllProfiles),
        mergeMap(() => this.dataService.getAllProfiles()
          .pipe(
            map(res => loadProfilesSuccess(res)),
            catchError(() => of(loadProfilesFailure())
          )
        )
      )
    );

推荐阅读