Диспетчер удаленных действий не соответствует в TypeScript - PullRequest
Новая
       15

Диспетчер удаленных действий не соответствует в TypeScript

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

Я пытаюсь создать асинхронное действие с redux-thunk .Это почти работает, но единственная проблема - dispatch(f()) вызывает ошибку в TSC.

При чтении избыточного официального документа , он принимает функции.

Код здесь: 

import { applyMiddleware, createStore, Reducer } from 'redux';
import thunkMiddleware, { ThunkAction } from 'redux-thunk';

// --------------------------------
// State

export interface IAppState {
  active: boolean;
}
const initialAppState: IAppState = {
  active: false,
};

// --------------------------------
// Actions and action creators

type AppAction = { type: 'turnOn' } | { type: 'turnOff' };

function turnOn (): AppAction {
  return { type: 'turnOn' };
}

function turnOff (): AppAction {
  return { type: 'turnOff' };
}

// --------------------------------
// Reducers

const rootReducer: Reducer<IAppState, AppAction> = (
  state = initialAppState,
  action,
) => {
  switch (action.type) {
    case 'turnOn': return { ...state, active: true };
    case 'turnOff': return { ...state, active: false };
    default: return state;
  }
};

// --------------------------------
// Store

export function createAppStore () {
  return createStore<IAppState, AppAction, {}, {}>(
    rootReducer,
    applyMiddleware(thunkMiddleware),
  );
}

const store = createAppStore();

// --------------------------------
// Use store

store.dispatch(turnOn());
store.dispatch(turnOff());

// --------------------------------
// Thunk action

function turnOnAndOff (
  delay: number,
): ThunkAction<Promise<void>, IAppState, null, AppAction> {
  return (dispatch) => new Promise((resolve) => {
    dispatch(turnOn());
    setTimeout(() => {
      dispatch(turnOff());
      resolve();
    }, delay);
  });
}

store.dispatch(turnOnAndOff(1000)); // ERROR

В последней строке TSC сообщает, что их типы не совпадают.

Ошибка TypeScript: аргумент типа 'ThunkAction , IAppState, null, AppAction>'нельзя назначить параметру типа' AppAction '.
Свойство' type 'отсутствует в типе' ThunkAction , IAppState, null, AppAction> ', но требуется в типе' {type: "turnOff";}».TS2345

Если я вместо этого написал turnOnAndOff(1000) as any, он будет работать правильно.

Как разрешить dispatch() принять функцию?

1 Ответ

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

Диспетчеризация групповых действий с использованием store.dispatch не поддерживается текущими наборами избыточного кода. Обычно у вас есть mapDispatchToProps, где вы можете напечатать диспетчер как ThunkDispatch. Вы можете выполнять встроенное приведение, даже если оно уродливое, а приведение типа теряет безопасность типов. Смотрите этот ответ: Как отправить действие или действие ThunkAction (в TypeScript, с избыточным thunk)?

...