NgRx导入Reducer时遭遇类型不兼容错误的求助

大家好，我在配置NgRx根Store时碰到了一个类型不兼容的报错，提示“assignable type 'readonly any[] | Type'”，怎么都没法成功导入我写的counterReducer。我已经查过ChatGPT和谷歌的各种方案，但都没解决问题，想请各位帮忙看看。

出现问题的Store配置代码 #

StoreModule.forRoot({
    counter: counterReducer
})

我编写的Counter Reducer代码 #

import { Action, createReducer, on } from '@ngrx/store';
import { increase, decrease, reset } from './counter.action';

export const initialState = 0;

const _counterReducer = createReducer(
  initialState,
  on(increase, state => state + 1),
  on(decrease, state => state - 1),
  on(reset, state => initialState)
);

export function counterReducer(state: number | undefined, action: Action) {
  return _counterReducer(state, action);
}

针对这个问题的几种解决方案 #

1. 明确定义根State与Reducer映射类型

这是最常见的解决方式，通过ActionReducerMap来规范根reducer的类型，让TypeScript能正确推导类型，避免不兼容：

首先创建根State的接口，再定义reducer映射：

// 定义应用根State的接口
export interface AppState {
  counter: number;
}

// 导入ActionReducerMap并定义reducer映射
import { ActionReducerMap } from '@ngrx/store';
import { counterReducer } from './counter.reducer';

export const appReducers: ActionReducerMap<AppState> = {
  counter: counterReducer
};

// 然后在StoreModule.forRoot中使用这个映射
StoreModule.forRoot(appReducers)

2. 修正Reducer的类型声明

有时候手动给reducer指定明确的类型能解决类型推导问题，修改你的counterReducer：

import { Action, createReducer, on, ActionReducer } from '@ngrx/store';
import { increase, decrease, reset } from './counter.action';

export const initialState = 0;
// 定义CounterState类型
export type CounterState = number;

const _counterReducer = createReducer(
  initialState,
  on(increase, state => state + 1),
  on(decrease, state => state - 1),
  on(reset, state => initialState)
);

// 明确指定counterReducer的类型为ActionReducer<CounterState>
export const counterReducer: ActionReducer<CounterState> = (state = initialState, action: Action) => {
  return _counterReducer(state, action);
};

3. 检查Action的定义是否正确

确保你的counter.action.ts中的action是用NgRx的createAction正确创建的，错误的Action定义也会导致Reducer类型异常：

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

export const increase = createAction('[Counter] Increase');
export const decrease = createAction('[Counter] Decrease');
export const reset = createAction('[Counter] Reset');

4. 检查NgRx版本与依赖

如果你的NgRx版本较新（比如14+），可能存在版本兼容问题。可以尝试重新安装依赖确保版本一致：

npm install @ngrx/store --save

备注：内容来源于stack exchange，提问作者Vanjara Pankaj