Angular 7 NGRX存储具有未定义状态

埃雷兹·康福特

我的代码在Angular7中,使用@ ngrx / store7,有时我会得到未定义状态(仅针对特定状态)

未定义状态

它始终是“历史”状态。

我的应用程式状态:

export interface IAppState {
  router?: RouterReducerState,
  delivery: IDeliveryState,
  events: IEventsState,
  families: IFamiliesState,
  googleDrive: IGoogleDriveState,
  spinner: ISpinnerState,
  user: IUserState,
  volunteerConstraints: IVolunteerConstraintsState,
  volunteers: IVolunteersState,
  history: IHistoryState
}

export const initialAppState: IAppState = {
  delivery: initialDeliveryState,
  events: initialEventsState,
  families: initialFamiliesState,
  googleDrive: initialGoogleDriveState,
  spinner: initialSpinnerState,
  user: initialUserState,
  volunteerConstraints: initialVolunteerConstraintsState,
  volunteers: initialVolunteersState,
  history: initialHistoryState
};

export function getInitialState(): IAppState {
  return initialAppState;
}

我的历史记录状态:

export interface IHistoryState {
  familyHistory: Array<FamilyHistoryModel>;
  familyHistoryPending: boolean;

  routeHistory: Array<RouteHistoryModel>;
  routeHistoryPending: boolean;

  deliveryHistory: Array<DeliveryHistoryChartModel>;

  volunteerRating: Array<VolunteerRatingModel>;
  volunteerRatingPending: number;

  initiated: boolean;
}

export const initialHistoryState: IHistoryState = {
  familyHistory: new Array<FamilyHistoryModel>(),
  familyHistoryPending: false,

  routeHistory: new Array<RouteHistoryModel>(),
  routeHistoryPending: false,

  deliveryHistory: new Array<DeliveryHistoryChartModel>(),

  volunteerRating: new Array<VolunteerRatingModel>(),
  volunteerRatingPending: 0,

  initiated: true
};

我的历史记录选择器:

const selectHistoryState = (state: IAppState) => state.history;

export const selectFamilyHistory = createSelector(
  selectHistoryState,
  (state: IHistoryState) => state.familyHistory
);

export const selectFamilyHistoryPending = createSelector(
  selectHistoryState,
  (state: IHistoryState) => state.familyHistoryPending
);

export const selectRouteHistory = createSelector(
  selectHistoryState,
  (state: IHistoryState) => state.routeHistory
);

export const selectRouteHistoryPending = createSelector(
  selectHistoryState,
  (state: IHistoryState) => state.routeHistoryPending
);

export const selectDeliveryHistory = createSelector(
  selectHistoryState,
  (state: IHistoryState) => state.deliveryHistory
);

export const selectVolunteerRating = createSelector(
  selectHistoryState,
  (state: IHistoryState) => state.volunteerRating
);
export const selectVolunteerRatingPending = createSelector(
  selectHistoryState,
  (state: IHistoryState) => state.volunteerRatingPending
);

我的应用简化程序:

export const appReducers: ActionReducerMap<IAppState, any> = {
  router: routerReducer,
  delivery: deliveryReducer,
  events: eventsReducer,
  families: familiesReducer,
  googleDrive: googleDriveReducer,
  spinner: spinnerReducer,
  user: userReducer,
  volunteerConstraints: volunteerConstraintsReducer,
  volunteers: volunteersReducer,
  history: historyReducer
}

我的历史减速器:

export function historyReducer(
  state = initialHistoryState,
  action: actions.HistoryActions): IHistoryState {
  switch (action.type) {
    case actions.HistoryActionTypes.Initiate:
      return {
        ...state,
        initiated: true
      };

    case actions.HistoryActionTypes.GetFamilyHistory:
      return { 
        ...state,
        familyHistory: initialHistoryState.familyHistory,
        familyHistoryPending:true
      };

    case actions.HistoryActionTypes.GetFamilyHistorySuccess:
      return {
        ...state,
        familyHistory: action.payload,
        familyHistoryPending: false
      };

    case actions.HistoryActionTypes.GetFamilyHistoryFailure:
      return {
        ...state,
        familyHistoryPending: false
      };

    case actions.HistoryActionTypes.GetRouteHistory:
      return {
        ...state,
        routeHistory: initialHistoryState.routeHistory,
        routeHistoryPending: true
      };

    case actions.HistoryActionTypes.GetRouteHistorySuccess:
      return {
        ...state,
        routeHistory: action.payload,
        routeHistoryPending: false
      };

    case actions.HistoryActionTypes.GetRouteHistoryFailure:
      return {
        ...state,
        routeHistoryPending: false
      };

    case actions.HistoryActionTypes.GetDeliveryHistory:
      return {
        ...state,
        deliveryHistory: initialHistoryState.deliveryHistory
      };

    case actions.HistoryActionTypes.GetDeliveryHistorySuccess:
      return {
        ...state,
        deliveryHistory: action.payload
      };

     case actions.HistoryActionTypes.GetVolunteersRating:
      return {
        ...state,
        volunteerRating: initialHistoryState.volunteerRating,
        volunteerRatingPending: state.volunteerRatingPending + 1
      };

    case actions.HistoryActionTypes.GetVolunteersRatingSuccess:
      return {
        ...state,
        volunteerRating: action.payload,
        volunteerRatingPending: state.volunteerRatingPending - 1
      };

    case actions.HistoryActionTypes.GetVolunteersRatingFailure:
      return {
        ...state,
        volunteerRatingPending: state.volunteerRatingPending - 1 < 0 ? 0 : 
state.volunteerRatingPending - 1
      };
 }
}

在开始时,历史状态是不确定的(如图所示),只有在我派出历史动作并在化简器中更改状态后,它才会启动。

与其他所有州一样,我该如何解决要在一开始就启动的问题?

packge.json:

  "dependencies": {
    "@agm/core": "^1.0.0-beta.3",
    "@agm/js-marker-clusterer": "^1.0.0-beta.3",
    "@angular-mdl/core": "^6.0.1",
    "@angular-mdl/datepicker": "^6.0.0",
    "@angular-mdl/expansion-panel": "^6.0.0",
    "@angular-mdl/popover": "^6.0.0",
    "@angular-mdl/select": "^6.0.0",
    "@angular/animations": "~7.1.0",
    "@angular/cdk": "^7.2.2",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/http": "^7.2.2",
    "@angular/material": "^7.2.2",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "@ngrx/effects": "^7.1.0",
    "@ngrx/router-store": "^7.1.0",
    "@ngrx/schematics": "^7.1.0",
    "@ngrx/store": "^7.1.0",
    "@ngrx/store-devtools": "^7.1.0",
    "@ngx-translate/core": "^10.0.2",
    "@ngx-translate/http-loader": "^3.0.1",
    "@swimlane/ngx-charts": "^10.0.0",
    "angular-2-local-storage": "^2.0.0",
    "angular2-moment": "^1.9.0",
    "angular2localization": "^1.4.2",
    "aos": "^2.3.4",
    "core-js": "^2.5.4",
    "crypto-js": "^3.1.9-1",
    "hammer-timejs": "^1.1.0",
    "hammerjs": "^2.0.8",
    "js-marker-clusterer": "^1.0.0",
    "jssha": "^2.3.1",
    "lodash": "^4.17.4",
    "lodash-es": "^4.17.4",
    "moment": "^2.20.1",
    "ngrx-store-freeze": "^0.1.9",
    "ngrx-store-localstorage": "^0.1.8",
    "ngrx-store-logger": "^0.1.8",
    "ngx-chips": "^1.4.5",
    "ngx-device-detector": "^1.3.0",
    "ngx-gallery": "^5.6.2",
    "ngx-infinite-scroll": "^0.5.1",
    "rxjs": "~6.3.3",
    "rxjs-compat": "^6.0.0",
    "sha.js": "^2.4.11",
    "tslib": "^1.9.0",
    "videogular2": "^6.3.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.11.0",
    "@angular/cli": "~7.1.4",
    "@angular/compiler-cli": "~7.1.0",
    "@angular/language-service": "~7.1.0",
    "@types/core-js": "^2.5.0",
    "@types/googlemaps": "^3.30.16",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.6"
  }
kgu87

在我看来,您在历史记录还原器中缺少默认情况。

switch(...) {
  case: ...
  case: ...
  default: {   
    return state;
  }
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

angular ngrx存储错误,无法读取未定义的属性“计划”

错误TypeError:无法读取Angular 7拖放中未定义的属性'length'

应用程序中的Angular 7错误无法读取未定义的“ ceil”

Angular 7错误ReferenceError:未定义SystemJS

angular7 ag-grid this.http是未定义错误

Angular 7反应形式无法读取未定义的属性“控件”

Angular 6 TypeError:无法读取未定义的属性“ e4b7 ... f”

无法读取未定义的属性“长度”-Angular 7

TypeError:无法读取未定义的属性-但网站可以正常工作-Angular 7

使用Angular 7获取“无法读取未定义的属性'http'”

变量未定义,因为在API调用完成之前已实例化了它-Angular 7

Angular 6错误处理-HttpErrorResponse具有未定义的状态

Angular7模板驱动的验证将NgModel导出到变量中,返回未定义

TypeError:无法读取未定义angular7的属性“ _id”

Angular 7 HttpClient获取请求未定义响应

Angular 7,Ngrx,ExpressionChangedAfterItHasBeenCheckedError

Angular 7 formGroup未定义

Angular 7给出了这个。拦截器是未定义的错误

Angular7 FullCalendar错误:无法读取未定义的属性“ length”

从Angular 7更新为8后出现“无法读取未定义的属性'map'中的错误”

无法读取未定义的传递LocalStorage值的属性以查看组件Angular 7

Angular 7 Observer 未定义

Angular 7 CLI ng 生成组件错误:'无法读取未定义的属性'sourceRoot''

Angular 7 服务是未定义的异常

Angular 7 - 在可观察中访问服务返回未定义

当我使用 angular 7 的传单路由机器时,Nominatim 未定义

ReferenceError: HTMLAnchorElement 未定义 Angular 7 Universal

Angular 7 Typerror:无法读取未定义的属性“userId”

Angular 7 + Ionic 4 构建失败“TypeError:无法读取未定义的属性(读取'种类')”