NGRX选择器抛出无法读取未定义的属性“ tourProvider”

时间:2019-08-19 13:01:35

标签: angular redux ngrx

我已经在我的角度应用程序中实现了ngrx。在我的管理模块中,我有一个API调用,用于为我创建的effect从服务器获取一些数据,并且该命令成功执行。我可以在redux开发工具中看到这一点。当我要使用选择器选择数据时会发生问题。在我的浏览器控制台中,此错误出现ERROR TypeError: Cannot read property 'tourProvider' of undefined。 我正在使用angular 8和ngrx 8.0.1

enter image description here

这是我的应用级状态root-state.ts

import { CustomerStateKey, CustomerState } from "../customer/customer- 
store/customer.state";
import { AdminStateKey, AdminState } from "../admin/admin- 
store/admin.state";
export interface State {
   [CustomerStateKey]: CustomerState;
   [AdminStateKey]: AdminState;
 }

模块级别状态admin.state.ts

import { TourproviderState } from "./state/tourprovider.state";
import { createFeatureSelector } from "@ngrx/store";
import { State } from "src/app/root-store/root-state";

export interface AdminState {
tourproviderState: TourproviderState;
}

export const AdminStateKey = 'admin';

export const SelectAdminState = createFeatureSelector<State, AdminState> 
(AdminStateKey);

动作文件tourprovider.actions.ts

import { createAction, props } from '@ngrx/store'
import { Tourprovider } from '../../../models/tour-provider'
import { RequestResult } from 'src/app/models/request-result';

export const loadTourprovider = createAction('[Tourprovider] Tourprovider 
Request');
export const loadTourproviderSuccess = createAction('[Tourprovider] 
Tourprovider Load Success', props<{ tourProvider: 
RequestResult<Tourprovider> }>());
export const loadTourproviderFail = createAction('[Tourprovider] 
Tourprovider Load Fail', props<{ errorMessage: string }>())

减速器文件tourprovider.reducer.ts

import { loadTourprovider, loadTourproviderSuccess, loadTourproviderFail } 
from '../actions/tourprovider.action'
import { createReducer, on, Action } from '@ngrx/store'
import { TourproviderState } from '../state/tourprovider.state';

const initialState: TourproviderState = {
  tourProvider: {},
  error: null,
  isLoading: false
}

const tourProviderReducer = createReducer(initialState,
 on(loadTourprovider, state => {
     console.log('tour provider reducer executed');
     return state;
 }),
 on(loadTourproviderSuccess, (state, { tourProvider }) => {
     console.log('tour provider reducer executed');
     return { ...state, tourProvider: tourProvider }
 }),
 on(loadTourproviderFail, ((state, { errorMessage }) => {
     return { ...state, errorMes: errorMessage }
 }))
);

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

这是我的选择器文件tourproivder.selector.ts

import { createSelector } from '@ngrx/store';
import { SelectAdminState, AdminState } from '../admin.state';

export const selectTourprovider = createSelector(SelectAdminState, ({ 
tourproviderState }: AdminState) => tourproviderState.tourProvider);

export const selectIsTourproviderLoading = 
createSelector(SelectAdminState, 
({ tourproviderState }: AdminState) => tourproviderState.isLoading);

export const selectTourproviderError = createSelector(SelectAdminState, ({ 
tourproviderState }: AdminState) => tourproviderState.error);

数据模型类型tourprovider.model.ts

export interface Tourprovider {
    id: number,
    name: string,
    email: string,
    description: string,
    logo: string,
    contactNum: string,
    contactNum2: string,
    streetAddress: string,
    streetAddress2: string,
    zipCode: string,
    city: string,
    state: string,
    countryCode: string,
    countryName: string,
}

数据模型类型request-result.model.ts

export interface RequestResult<T> {
  code: number;
  message: string;
  payload: T;
}

0 个答案:

没有答案