Angular Redux技术求助：无法将Reducer指定为IAppState接口及类型不兼容报错问题

这个错误的核心原因很清晰：Redux的Reducer<IAppState, AnyAction>类型要求reducer的state参数可以是IAppState | undefined（比如store初始化时，state会是undefined），但你定义的rootReducer只接受IAppState类型的state，所以出现了类型不匹配。同时你的reducer还有个小问题：如果没有匹配到任何action类型，函数会默认返回undefined，这也不符合返回IAppState的要求。

下面是两种可行的修复方案：

方案一：给state参数设置默认初始值 #

直接在reducer的参数里给state设置默认值，这样TypeScript会自动处理undefined的情况，同时确保任何未匹配的action都返回当前state：

// store.ts
export interface IAppState{
  counter:number;
}

export function rootReducer(state: IAppState = { counter: 0 }, action: any): IAppState {
  switch (action.type){
    case 'INCREMENT':
      return {counter: state.counter + 1};
    // 必须添加default分支，避免未匹配action时返回undefined
    default:
      return state;
  }
}

方案二：显式处理undefined的state #

如果你更倾向于显式处理state为undefined的情况，可以把state类型设为IAppState | undefined，然后在函数开头初始化初始状态：

// store.ts
export interface IAppState{
  counter:number;
}

export function rootReducer(state: IAppState | undefined, action: any): IAppState {
  // 当state为undefined时返回初始状态
  if (!state) {
    return { counter: 0 };
  }

  switch (action.type){
    case 'INCREMENT':
      return {counter: state.counter + 1};
    default:
      return state;
  }
}

为什么这样能解决问题？ #

Redux的reducer规范要求：当传入undefined作为state时，必须返回合法的初始状态。这是因为store初始化阶段会调用reducer一次，传入undefined来获取初始状态（即便你在configureStore里传入了初始值，reducer本身仍需符合类型要求）。

这两种方案都让你的reducer符合了Redux的类型规范，同时保证了所有分支都返回IAppState类型的值，类型错误自然就消失了。

内容的提问来源于stack exchange，提问作者seaprogramming