Ngrx state 在 angular 12 中未定義

Question

我正在嘗試將 NGRX redux 庫與 Angular 12 一起使用。應用程序的 state 未定義。

索引.ts

export interface ApplicationState {
  product: ProductState | undefined;
}

export const reducers: ActionReducerMap<ApplicationState> = {
  product: productReducer,
};


export const metaReducers: MetaReducer<ApplicationState>[] = [];

應用模塊.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)
};

應用程序的 state 在減速器調用中未定義，不太確定可能是主要問題。

調度方式

import {ActionCreators, GetUsers} from '../../store/action/product.actions'
constructor(
    private store: Store<ApplicationState>
    ) { }

  ngOnInit(): void {
 this.store.dispatch(ActionCreators.formValidation());
  }

Answer 1

您需要將state默認為您的initialState 。

export const proudctReducer = (state: ProductState = initialState, ...)