Angular NgRx type problem on ActionReducerMap-CodePudding

I'm coding a small Angular app to learn NgRx but I got stuck on configuring the reducers, I think that the problem is related to the Angular strict mode but I didn't find any info about it.

I'm using the following setup:

Angular 13
NgRx 13
Node 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 (this is my global file)

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

export interface GlobalState {
  common: CommonState
}

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

But the compiler is throwing the following error

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>'

CodePudding user response：

Can you try this

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