打字稿Redux没有重载匹配此调用

Question

我对打字稿还不是很陌生，但是我认为我可以将它与react和redux一起用于我的副项目之一。一切工作都很好，直到我需要使用减速器为止。 因此，以下是我的减速器代码。

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

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

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

type FetchVideoAction = {
  type: ActionTypes;
  payload: FetchVideo;
};

export const videoReducer = (state = intialState, action: FetchVideoAction) => {
  switch (action.type) {
    case ActionTypes.FETCH_DATA_START:
      return {
        ...state,
        isLoading: true,
        errorFetching: '',
      };
    case ActionTypes.FETCH_DATA_SUCCESS:
      return {
        ...state,
        allVideos: action.payload,
        isLoading: false,
        errorFetching: '',
      };
    case ActionTypes.FETCH_DATA_FAILURE:
      return {
        ...state,
        isLoading: false,
        errorFetching: action.payload,
      };
    default:return state

  }
};

现在，我要做的是创建一个存储状态接口，并将其作为通用语言传递给CombineReducer，如下所示

export interfac      profile: ProfileDet;e StoreState {
  sideBar: ToggleActionDetails;
  fetchVideo: FetchVideo;
}

export const reducers = combineReducers<StoreState>({
  sideBar: sideBarReduer,
  fetchVideo: videoReducer,
});

现在我在说这个错误，

据我所知，散布运算符使事情出错。我什至使用Null运算符来处理未定义的问题，但仍然无法正常工作。

Answer 1

检查开关盒的FETCH_DATA_SUCCESS分支。它有

case ActionTypes.FETCH_DATA_SUCCESS:
      return {
        ...state,
        allVideos: action.payload,
        isLoading: false,
        errorFetching: '',
      };

allVideos的类型在FetchVideo中定义为ReadonlyArray<string[]>，但是您正在尝试为其分配action.payload，其类型为FetchVideo在FetchVideoAction中。就是这个问题-您无法将FetchVideo类型的对象分配给ReadonlyArray<string[]>。

实际上，错误消息确实暗示了这一点：请参阅stacktrace上方的最后一行：（Type ... is not assignable to type 'FetchVideo'）。同意，它没有给出非常有用的行号，但是它确实表明某处存在一个琐碎的类型不匹配。