Как использовать привязки Redux 4.0 TypeScript с redux-thunk - PullRequest
Новая
       9

Как использовать привязки Redux 4.0 TypeScript с redux-thunk

0 голосов
/ 31 мая 2018

У меня проблемы с использованием новых привязок TS для Redux 4.0 с redux-thunk.Я воссоздал проблему, преобразовав базовый пример Redux «Список Todo» в TypeScript ( репо здесь ) и сделав действие «Добавить Todo» громом.Проблема такая же, как сообщается здесь : Аргумент типа 'ThunkAction' не может быть назначен параметру типа 'AnyAction'.Свойство 'type' отсутствует в типе 'ThunkAction' .

В принципе, я могу заставить его работать, но я использую any в нескольких местах, где я не думаю, что ядолжен.Одно место - index.tsx # L14 , где я добавляю промежуточное программное обеспечение Thunk в магазин: 

const store = createStore(
  rootReducer,
  applyMiddleware(thunk as ThunkMiddleware<IRootState, any>)
);

Если я использую там что-либо, кроме any, тогда выдается следующая строкаошибка: 

store.dispatch(addTodo('Use redux-thunk'));

Другое место - AddTodo.tsx # L7 , где я объявляю реквизит диспетчеризации, который вводится функцией connect: 

interface IAddTodoProps {
  dispatch: Dispatch<any>;
}

const AddTodo = ({ dispatch }: IAddTodoProps) => {
  ...
}
export default connect()(AddTodo);

В обоих местах any переопределяет тип, который должен расширяться Action<any>.Action требует атрибута type, которого, конечно, у thunk нет.Как я могу объявить эти типы так, чтобы функция dispatch принимала thunk?

Связанный вопрос
Соответствующий PR

1 Ответ

0 голосов
/ 13 августа 2018 
diff --git a/src/containers/AddTodo.tsx b/src/containers/AddTodo.tsx
index e49ac4a..20a93d6 100644
--- a/src/containers/AddTodo.tsx
+++ b/src/containers/AddTodo.tsx
@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
-import { Dispatch } from 'redux';
+import { ThunkDispatch } from 'redux-thunk';
+import { AnyAction } from 'redux';
 import { addTodo } from '../actions';
+import { IRootState } from '../reducers/index';

 interface IAddTodoProps {
-  dispatch: Dispatch<any>;
+  dispatch: ThunkDispatch<IRootState,any,AnyAction>;
 }

 const AddTodo = ({ dispatch }: IAddTodoProps) => {
...