Почему я получаю ошибку: нет перегрузки соответствует этому вызову. Перегрузка 1 из 3 в моем проекте Typescript?

Question

Я получаю следующую ошибку:

(свойство) hero: Reducer Перегрузка не соответствует этому вызову. Перегрузка 1 из 3, '(redurs: ReducersMapObject): Reducer, AnyAction>', вызвала следующую ошибку.

Тип '(состояние: строка | undefined, action: Action) => string | Герой »нельзя назначить типу« Редуктор ». Типы параметров «состояние» и «состояние» несовместимы. Тип 'Герой | undefined «нельзя назначить типу» string | undefined '.

Тип' Hero 'нельзя назначить типу' string'.ts (2769) index.ts (7, 3): ожидаемый тип происходит из свойства 'hero', которое объявлено здесь для типа «ReducersMapObject»

Появляется на «герое», указанном в index.ts ниже, с 3 звёздочками по обе стороны от него.

redurs / index.ts:

import { combineReducers } from "redux";
import { heroesReducer, heroReducer } from "./reducer";
import { Hero } from "../actions";

export interface StoreState {
  heroes: Hero[];
  hero: Hero;
}

export const reducers = combineReducers<StoreState>({
  heroes: heroesReducer,
  ***hero***: heroReducer
});

redurs / redurs.ts

import { Hero, Action, ActionTypes } from "../actions";

export const heroesReducer = (state: Hero[] = [], action: Action) => {
  switch (action.type) {
    case ActionTypes.fetchAllHeroes:
      return action.payload;

    default:
      return state;
  }
};

export const heroReducer = (state: Hero, action: Action) => {
  switch (action.type) {
    case ActionTypes.fetchSingleHero:
      return action.payload;

    default:
      return state;
  }
};

actions / types.ts

import { FetchAllHeroesAction, FetchSingleHeroAction } from "./heroes";

export enum ActionTypes {
  fetchAllHeroes,
  fetchSingleHero,
  searchHero
}

export type Action = FetchAllHeroesAction | FetchSingleHeroAction;

компонентов / HeroItem:

import React from "react";
import { StoreState } from "../reducers";
import { connect } from "react-redux";
import { Hero, fetchSingleHero } from "../actions";

interface HeroProps {
  id: string;
  hero: Hero;
}

export const _HeroItem: React.FC<HeroProps> = props => {
  console.log(props);

  return <div>{props.hero}hihihihi</div>;
};

const mapStateToProps = (state: StoreState): { hero: Hero } => {
  return { hero: state.hero };
};

export const HeroItem = connect(mapStateToProps, { fetchSingleHero })(
  _HeroItem
);

actions / heroes.ts:

import axios from "axios";
import { Dispatch } from "redux";
import { ActionTypes } from "./types";

export interface Hero {
  id: string;
  name: string;
  powerstats: {
    strength: string;
    speed: string;
    intelligence: string;
    durability: string;
    power: string;
    combat: string;
  };

  biography: {
    fullName: string;
    alterEgos: string;
    aliases: string[];
    placeOfBirth: string;
    publisher: string;
    alignment: string;
  };

  appearance: {
    gender: string;
    race: string;
    height: string[];
    weight: string[];
  };

  work: {
    occupation: string;
    base: string;
  };

  connections: {
    groupAffiliation: string;
    relatives: string;
  };

  image: {
    url: string;
  };
}


export interface FetchSingleHeroAction {
  type: ActionTypes.fetchSingleHero;
  payload: Hero;
}

export interface HeroId {
  id: string;
}

export const fetchSingleHero = (heroId: HeroId) => {
  const url = `https://superheroapi.com/api/2987607971258652/${heroId}`;

  return async (dispatch: Dispatch) => {
    const res = await axios.get(corsProxy + url);
    console.log(res.data);
    dispatch<FetchSingleHeroAction>({
      type: ActionTypes.fetchSingleHero,
      payload: res.data
    });
  };
};

Прошлой ночью я заставил его работать над действием 'FetchAllHeroes', но сделал это, удалив часть компонента проверки машинописи, который, я думаю, не самый лучший способ. Если у кого-то есть какие-либо идеи о том, как это исправить или он хочет, чтобы любая другая информация помогла ему, был бы очень признателен Я очень новичок в Typescript.

Спасибо!