React TypeScript中useReducer初始化传入initialState报void类型错误如何解决

问题根因 #

报错的核心原因是reducer函数不符合useReducer的约定，触发了TypeScript的类型校验：

• useReducer要求传入的reducer函数必须返回最新的状态值，你当前定义的reducer只执行了console.log，没有任何返回语句，函数返回值类型被TypeScript推断为void
• TypeScript会自动根据reducer的返回值推断useReducer的状态类型为void，你传入的第二个初始状态参数类型是{count: number}，和void类型不匹配，因此抛出对应报错。

修复方案 #

完整修复（符合生产规范） #

先定义状态和操作的类型，补全reducer的逻辑，确保每次都返回合法的状态值：

// 定义state和action的类型
type State = {
  count: number
}
type Action = {
  type: 'increment' | 'decrement'
  payload?: number
}

const initialState: State = {
  count: 0,
};

// reducer入参为当前state和触发的action，返回值为新的state
const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + (action.payload ?? 1) }
    case 'decrement':
      return { ...state, count: state.count - (action.payload ?? 1) }
    default:
      // 未匹配到的action类型原样返回当前state
      return state
  }
};

const Test = (): ReactElement => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return <div>count: {state.count}</div>;
};

临时测试快速修复 #

如果只是临时验证useReducer的基础调用逻辑，不需要处理复杂操作，可以先写最简版本的reducer，至少保证返回当前状态：

const reducer = (state: typeof initialState) => {
  console.log('hello');
  // 必须返回状态值
  return state;
};

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