javascript – 如何将Redux 4.0 TypeScript绑定与redux-thunk一起使用

2019年7月28日 309次阅读

我在使用带有redux-thunk的Redux 4.0的新TS绑定时遇到了麻烦.我通过将基本的Redux
“Todo List” example转换为TypeScript(
repo here)并将Add Todo操作变为thunk来重新创建该问题.问题与报告的
here相同：“ThunkAction”类型的参数不能分配给“AnyAction”类型的参数.

‘ThunkAction’类型中缺少属性’type’.

基本上,我可以让它工作,但我在几个我认为不应该的地方使用任何一个.一个地方是index.tsx#L14,我在那里将thunk中间件添加到商店：

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

如果我使用除了那里之外的任何东西,那么下一行会抛出错误：

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

另一个地方是AddTodo.tsx#L7,我在这里声明了由connect函数注入的dispatch prop：

interface IAddTodoProps {
  dispatch: Dispatch<any>;
}

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

在这两个地方,any都会覆盖必须扩展Action< any>的类型. Action需要一个type属性,当然thunk没有.如何声明这些类型以便dispatch函数接受thunk？

Related question
Relevant PR

最佳答案

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) => {
点赞