TypeScript Redux报错No overload matches this call，Reducer使用问题求助

你的问题根源其实是Action类型定义不匹配，和扩展运算符无关，咱们一步步拆解解决：

核心问题分析 #

你定义的FetchVideoAction把所有action的payload都统一设为FetchVideo类型，但三个action的payload实际完全不同：

• FETCH_DATA_START：根本不需要payload
• FETCH_DATA_SUCCESS：payload是视频数组（ReadonlyArray<string[]>）
• FETCH_DATA_FAILURE：payload是错误字符串（string）

这种类型不匹配会让TypeScript判定你的reducer不符合combineReducers的类型约束，从而抛出"No overload matches this call"错误。另外你还拼错了initialState（写成了intialState），虽然不是当前错误的直接原因，但也需要修正。

修正步骤 #

1. 正确定义Action类型 #

我们为每个action单独定义类型，再用联合类型组合：

import { ActionTypes } from '../actions/types';

export interface FetchVideo {
  isLoading: boolean;
  allVideos: ReadonlyArray<string[]>;
  errorFetching: string;
}

// 为每个action定义精准类型
type FetchDataStartAction = { type: ActionTypes.FETCH_DATA_START };
type FetchDataSuccessAction = { type: ActionTypes.FETCH_DATA_SUCCESS; payload: ReadonlyArray<string[]> };
type FetchDataFailureAction = { type: ActionTypes.FETCH_DATA_FAILURE; payload: string };

// 组合成联合类型，让TypeScript能识别不同action的差异
type FetchVideoAction = FetchDataStartAction | FetchDataSuccessAction | FetchDataFailureAction;

2. 修正Reducer逻辑 #

现在可以在reducer里正确处理每个action的payload，同时修正initialState的拼写：

const initialState: FetchVideo = {
  isLoading: false,
  allVideos: [],
  errorFetching: '',
};

export const videoReducer = (state = initialState, action: FetchVideoAction) => {
  switch (action.type) {
    case ActionTypes.FETCH_DATA_START:
      return { ...state, isLoading: true, errorFetching: '' };
    case ActionTypes.FETCH_DATA_SUCCESS:
      // 此时payload类型是正确的视频数组，TypeScript不会再报错
      return { ...state, allVideos: action.payload, isLoading: false, errorFetching: '' };
    case ActionTypes.FETCH_DATA_FAILURE:
      // payload类型是正确的错误字符串，匹配errorFetching字段
      return { ...state, isLoading: false, errorFetching: action.payload };
    default:
      return state;
  }
};

3. 确认StoreState和combineReducers #

你的StoreState定义是没问题的，现在修正后的reducer可以完美匹配StoreState中的fetchVideo字段类型，combineReducers的错误应该会消失：

export interface StoreState {
  sideBar: ToggleActionDetails;
  fetchVideo: FetchVideo;
}

export const reducers = combineReducers<StoreState>({
  sideBar: sideBarReduer, // 这里注意拼写：如果是笔误建议改成sideBarReducer
  fetchVideo: videoReducer,
});

额外小提示 #

如果后续经常遇到Redux+TypeScript的类型问题，推荐使用Redux Toolkit，它会自动帮你处理大部分类型推导，减少手动定义类型的繁琐，也能避免很多类似的类型错误。

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