Angular ActionReducerMap 上的 NgRx 类型问题

Question

我正在编写一个小型 Angular 应用程序来学习 NgRx，但我在配置 reducers 时遇到了困难，我认为问题与 Angular 严格模式有关，但我没有查找有关它的任何信息。

我正在使用以下设置：

Angular 13
NGRx 13
节点 16

common.actions.ts

import {createAction} from '@ngrx/store';

export const isLoading = createAction('[Common] isLoading');

common.reducer.ts

import {Action, createReducer, on} from '@ngrx/store';
import * as actions from './common.actions';

export interface CommonState {
  isLoading: boolean;
}

export const commonState: CommonState = {
  isLoading: false,
};

const _commonReducer = createReducer(
  commonState,
  on(actions.isLoading, commonState => (commonState))
);

export function commonReducer(state: CommonState, action: Action) {
  return _commonReducer(state, action);
}

app.reducer.ts（这是我的全局文件）

import {commonReducer, CommonState} from "~/common/common.reducer";
import {ActionReducerMap} from "@ngrx/store";

export interface GlobalState {
  common: CommonState
}

export const appReducers: ActionReducerMap<GlobalState> = {
  common: commonReducer
}

但是编译器抛出以下错误

TS2322: Type '(state: CommonState, action: Action) => CommonState' is not assignable to type 'ActionReducer<CommonState, Action>'.   Types of parameters 'state' and 'state' are incompatible.     Type 'CommonState | undefined' is not assignable to type 'CommonState'.       Type 'undefined' is not assignable to type 'CommonState'.  app.reducer.ts(5, 3): The expected type comes from property 'common' which is declared here on type 'ActionReducerMap<GlobalState, Action>'

Answer 1

你能试试这个吗

export function commonReducer(state: CommonState | undefined, action: Action) {
  return _commonReducer(state, action);
}

Angular ActionReducerMap 上的 NgRx 类型问题

Angular NgRx type problem on ActionReducerMap

angular

typescript

ngrx

ngrx-store