Question

我正从组件内部的NGRX存储中获取数据。我的redux具有以下配置： calendar.reducer.ts：

    import {MonthModel} from "./month.model";
    import * as MonthActions from "./calendar.actions"

        export const initialState: MonthModel = {
            shifts: [],
            numberOfYear: 2020,
            numberOfMonth: 6,
            loading: false
        };

        export type Action = MonthActions.All;

        export function calendarReducer(state: MonthModel = initialState, action: Action) {
          switch (action.type) {
            case MonthActions.GET_SHIFTS:
              return {...state, loading: true};
            case MonthActions.GET_SHIFTS_SUCCESS:
              return {...state, ...action.payload ,loading: false};
            default: state;
          }
          return state;
    }

calendar.effects.ts

    import { Injectable } from "@angular/core";
    import {act, Actions, Effect, ofType} from "@ngrx/effects";
    import {Observable, of} from "rxjs";
    import {catchError, delay, map, mergeMap, switchMap} from 'rxjs/operators';
    import * as MonthActions from "./calendar.actions"
    import {ShiftsService} from "../service/shifts.service";

    export type Action = MonthActions.All;

    @Injectable()
    export class CalendarEffects {
      constructor( private actions: Actions,
                   private shiftService: ShiftsService) {}

    @Effect()
    getShifts = this.actions.pipe(ofType(MonthActions.GET_SHIFTS),
      map((action: MonthActions.getShiftsAction) => action.payload),
      delay(2000),
      mergeMap(payload => this.shiftService.getShifts(2020, 6).pipe (
            map(getShiftsState => ({type: MonthActions.GET_SHIFTS_SUCCESS, payload: 
    getShiftsState})),
            catchError(() => of({type: MonthActions.GET_SHIFTS_ERROR})))))
    }

    import {MonthModel} from "./month.model";
    import {createFeatureSelector, createSelector} from "@ngrx/store";

    export interface MonthState {
      monthState: MonthModel;
    }

    export const getMonthShifts = (state: MonthState) => state.monthState.shifts ;
    export const getMonthLoading = (state: MonthState) => state.monthState;

    export const calendarStateFeatureKey = 'MonthModel';

    export const getMonthState = createFeatureSelector(calendarStateFeatureKey);

    export const getCalendarLoading = createSelector(getMonthState, (state:MonthModel)=> state.loading);
    export const getCalendarShifts  = createSelector(getMonthState, (state:MonthModel)=> state.shifts );

calendar.selectors.ts

    import {MonthModel} from "./month.model";
    import {createFeatureSelector, createSelector} from "@ngrx/store";

    export interface MonthState {
      monthState: MonthModel;
    }

    export const getMonthShifts = (state: MonthState) => state.monthState.shifts ;
    export const getMonthLoading = (state: MonthState) => state.monthState;

    export const calendarStateFeatureKey = 'MonthModel';

    export const getMonthState = createFeatureSelector(calendarStateFeatureKey);

    export const getCalendarLoading = createSelector(getMonthState, (state:MonthModel)=> state.loading);
    export const getCalendarShifts  = createSelector(getMonthState, (state:MonthModel)=> state.shifts );

calendar.actions.ts

    import {Action} from "@ngrx/store";
    import {MonthModel} from "./month.model";

    export const GET_SHIFTS         = "GET_SHIFTS";
    export const GET_SHIFTS_SUCCESS = "GET_SHIFTS_SUCCESS";
    export const GET_SHIFTS_ERROR   = "GET_SHIFTS_ERROR";


    export class getShiftsAction implements Action {
      readonly type = GET_SHIFTS;
      constructor(public payload: string) { }
    }

    export class getShiftsSuccessAction implements Action {
      readonly type = GET_SHIFTS_SUCCESS;
      constructor(public payload: MonthModel[]) { }
    }

    export type All
      = getShiftsAction
      | getShiftsSuccessAction;

month.model.ts

    import {Shift} from "../shift/shift";

    export interface MonthModel {

          loading: boolean;
          numberOfMonth: number;
          numberOfYear: number;
          shifts : Shift[];
          error?: string;

    }

我正在尝试通过选择器从MonthModel中获取数据，而这个选择器的工作原理如下：

    this.monthState$  = this.store.select(getCalendarLoading);

但是我无法从商店获得班次数组！我只得到空数组！

    this.monthShifts$ = this.store.select(getCalendarShifts);
            this.monthShifts$.subscribe(
              shifts=>{
                console.log('data',shifts );
              }
            )

请帮助我理解并解决：如何从商店获取班次数组？ ps。在ReduxDevTools内部，我可以看到我所有的数据都已存储，所有班次都在那里。谢谢！

Answer 1

这很容易，您忘了将payload中的action处理到减速器上。

case MonthActions.GET_SHIFTS:
  return {...state, loading: true}; // <-- here we need action.payload
  // return {...state, shifts: aciton.payload, loading: true}, // I guess

ngrx angular9从商店获取数组

1 个答案: