Redux Thunk с машинописным шрифтом

Question

Я изучаю Typescript и пытаюсь реализовать простое приложение React / Redux.Когда я использую действия синхронизации, он работает нормально, но проблемы связаны с асинхронным действием.Я следую официальному уроку по избыточности.

Сначала я объявляю состояние для сеанса

export interface UserSessionState {
  loggedIn: boolean;
}

Затем я объявляю интерфейс для действия

interface UpdateSessionAction {
  type: 'USER_LOGIN';
  payload: boolean;
}

Я экспортируюих с Union Types

export type UserActionTypes = UpdateSessionAction;

Тогда у меня есть действительное действие

export function updateSession(loggedIn: UserSessionState) {
  return {
    type: 'USER_LOGIN',
    payload: loggedIn,
  };
}

У меня есть поддельный вызов API

function api() {
  return Promise.resolve(true);
}

Инаконец логин

export const userLogin = (): ThunkAction<
  void,
  {},
  {},
  AnyAction
> => async (dispatch: ThunkDispatch<{}, {}, AnyAction>) => {
  const res = await api();
  dispatch(updateSession({ loggedIn: res }));
};

В редукторе я просто инициализирую состояние

initialState: UserSessionState = {loggedIn: false}

Затем я делаю обычные редукционные вещи для редуктора.

Наконец, в моем магазине я вызываю начальное действие для проверки состояния

store.dispatch(userLogin());

Я получаю эту ошибку:

Argument of type 'ThunkAction<Promise<void>, {}, {}, AnyAction>' is not assignable to parameter of type 'AnyAction'.
  Property 'type' is missing in type 'ThunkAction<Promise<void>, {}, {}, AnyAction>' but required in type 'AnyAction'.

Я пропускаю type, но у меня нетИдея, что я делаю не так.

Answer 1

Короче говоря:

Вы получаете эту ошибку, потому что из вашей функции userLogin() возвращается ThunkAction, которого нет type

Почему это происходит?

диспетчер должен принимать параметр типа AnyAction.AnyAction - это тип избыточности, который расширяет Action (который имеет обязательное свойство type).

Это из текущего файла типов избыточности

export interface Action<T = any> {
  type: T
}

/**
 * An Action type which accepts any other properties.
 * This is mainly for the use of the `Reducer` type.
 * This is not part of `Action` itself to prevent users who are extending `Action.
 */
export interface AnyAction extends Action {
  // Allows any extra properties to be defined in an action.
  [extraProps: string]: any
}

Как это исправить? Использовать тип ThunkDispatch вместо стандартного Dispatch.Следующий пример и многое другое можно найти в этом Gist

const mapDispatchToProps = (dispatch: ThunkDispatch<MyState, void, Action>) => {
  return {
    onRequestClick: (arg: any) => dispatch(myAsyncAction(arg)),
  };
}

Также см. Эту статью , раздел Отображение отправки в Props