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