Redux Thunk в TypeScript - PullRequest
Новая
       7

Redux Thunk в TypeScript

0 голосов
/ 20 марта 2019

Я пытаюсь лучше понять функцию ThunkDispatch и TypeScript.Получил этот код для использования избыточности и thunk. 

// This is redux-thunk source code
import { Middleware, Action, AnyAction } from "redux";

export interface ThunkDispatch<S, E, A extends Action> {
  <T extends A>(action: T): T;
  <R>(asyncAction: ThunkAction<R, S, E, A>): R;
}

export type ThunkAction<R, S, E, A extends Action> = (
  dispatch: ThunkDispatch<S, E, A>,
  getState: () => S,
  extraArgument: E
) => R;

===================

import { Action } from 'redux'
import { ThunkAction } from 'redux-thunk'
import { ThunkDispatch } from 'redux-thunk'

interface ReduxState {
  // redux states
}

type ThunkResult<R> = ThunkAction<R, ReduxState, undefined, Action>
type ReduxDispatch = ThunkDispatch<ReduxState, undefined, Action>

const loadAppData = (): ThunkResult<void> => async (dispatch, getState) => {
  // get app data
  dispatch(MyAction.getAppDataSuccess(17))
}

const mapDispatchToProps = (dispatch: ReduxDispatch) => ({
  loadAppData: () => dispatch(loadAppData()),
})

Мое текущее понимание: 

export interface ThunkDispatch<S, E, A extends Action> {
  <T extends A>(action: T): T;
  <R>(asyncAction: ThunkAction<R, S, E, A>): R;
}

ThunkDispatch - это интерфейс с двумя свойствами, назовем их A и B. Aявляется функцией с параметром action тип T и возвращает что-то типа T.Точно так же для B это функция с параметром asyncAction тип ThunkAction<R, S, E, A> и возвращает что-то типа R.

Вопрос Являются ли <T extends A> и <R> часть только для того, чтобы подразумевать новый универсальный тип?

Мое текущее понимание: 

const mapDispatchToProps = (dispatch: ReduxDispatch) => ({
  loadAppData: () => dispatch(loadAppData()),
})

dispatch как параметр - это тип ReduxDispatch, который является интерфейсомс двумя функциями свойств.

loadAppData - это функция, которая будет возвращать тип ThunkResult<void>, который эквивалентен ThunkAction<Void, ReduxState, undefined, Action>.Если мы поместим эти типы в определение ThunkAction, оно будет соответствовать сигнатуре async (dispatch, getState) => { ... }

Вопрос dispatch(loadAppData()) в mapDispatchToProps, loadAppData() возвращает ThunkResult<void> который по сути является функцией.dispatch это просто интерфейс с двумя функциями свойств, тогда этот синтаксис для меня не имеет смысла, interface(func)

Если я что-то неправильно понял, пожалуйста, укажите это!Спасибо

1 Ответ

1 голос
/ 20 марта 2019

Лично я не могу найти место в руководстве TS, которое объясняет перегрузку функции интерфейсов.

Все, что доступно:

  1. Интерфейсы :: Типы функций
  2. Перегрузки функций

Если я не ошибаюсь, представленная вами декларация 

export interface ThunkDispatch<S, E, A extends Action> {
  <T extends A>(action: T): T;
  <R>(asyncAction: ThunkAction<R, S, E, A>): R;
}

может быть реализована иначеследующее объединение двух типов функций: 

type ThunkDispatch<S, E, A extends Action> = (<T extends A>(action: T) => T) | (<R>(asyncAction: ThunkAction<R, S, E, A>) => R);

или 

type ThunkDispatch<S, E, A extends Action> =
    | (<T extends A>(action: T) => T)
    | (<R>(asyncAction: ThunkAction<R, S, E, A>) => R);
...