angular 12 中未定义的 Ngrx 状态
Ngrx state undefined in angular 12
我正在尝试将 NGRX redux 库与 Angular12 一起使用。应用程序的状态未定义。
Index.ts
export interface ApplicationState {
product: ProductState | undefined;
}
export const reducers: ActionReducerMap<ApplicationState> = {
product: productReducer,
};
export const metaReducers: MetaReducer<ApplicationState>[] = [];
App.module.ts
@NgModule({
declarations: [
AppComponent
],
imports: [
AppRoutingModule,
StoreModule.forRoot(reducers, { metaReducers })
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
减速器
export interface ProductState {
formValidation: FormGroup;
}
export const initialState: ProductState = {
formValidation: new FormGroup({})
};
export const productReducer: any = (state: ProductState | undefined, incomingAction: Action): ProductState => {
if (state === undefined) {
return state;
}
const action = incomingAction as KnownAction;
switch (action.type) {
case 'FORM_VALIDATION':
return state;
default:
return state;
}
};
动作
export interface ProductFormValidationAction { type: 'FORM_VALIDATION' }
export type KnownAction = ProductFormValidationAction | any;
export const ActionCreators = {
formValidation: () => ({ type: 'FORM_VALIDATION' } as ProductFormValidationAction)
};
应用程序的状态在 reducer 调用中未定义,非常不确定主要问题是什么。
派送方式
import {ActionCreators, GetUsers} from '../../store/action/product.actions'
constructor(
private store: Store<ApplicationState>
) { }
ngOnInit(): void {
this.store.dispatch(ActionCreators.formValidation());
}
您需要将 state
默认为您的 initialState
。
export const proudctReducer = (state: ProductState = initialState, ...)
我正在尝试将 NGRX redux 库与 Angular12 一起使用。应用程序的状态未定义。
Index.ts
export interface ApplicationState {
product: ProductState | undefined;
}
export const reducers: ActionReducerMap<ApplicationState> = {
product: productReducer,
};
export const metaReducers: MetaReducer<ApplicationState>[] = [];
App.module.ts
@NgModule({
declarations: [
AppComponent
],
imports: [
AppRoutingModule,
StoreModule.forRoot(reducers, { metaReducers })
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
减速器
export interface ProductState {
formValidation: FormGroup;
}
export const initialState: ProductState = {
formValidation: new FormGroup({})
};
export const productReducer: any = (state: ProductState | undefined, incomingAction: Action): ProductState => {
if (state === undefined) {
return state;
}
const action = incomingAction as KnownAction;
switch (action.type) {
case 'FORM_VALIDATION':
return state;
default:
return state;
}
};
动作
export interface ProductFormValidationAction { type: 'FORM_VALIDATION' }
export type KnownAction = ProductFormValidationAction | any;
export const ActionCreators = {
formValidation: () => ({ type: 'FORM_VALIDATION' } as ProductFormValidationAction)
};
应用程序的状态在 reducer 调用中未定义,非常不确定主要问题是什么。
派送方式
import {ActionCreators, GetUsers} from '../../store/action/product.actions'
constructor(
private store: Store<ApplicationState>
) { }
ngOnInit(): void {
this.store.dispatch(ActionCreators.formValidation());
}
您需要将 state
默认为您的 initialState
。
export const proudctReducer = (state: ProductState = initialState, ...)