redux-thunk：通过 store.dispatch() 调用操作时缺少属性“类型”答案

【问题标题】：redux-thunk: Property 'type' missing when calling action through store.dispatch()redux-thunk：通过 store.dispatch() 调用操作时缺少属性“类型”
【发布时间】：2019-06-19 15:09:57
【问题描述】：

我在网上发现了类似的问题，但在通过store.dispatch() 调用redux-thunk Action 时没有解决方案。

我有以下action：

export class DBActions {
  static startDatabase(): ThunkAction<Promise<void>, {}, IClientState, AnyAction> {
    return async (dispatch: ThunkDispatch<{}, {}, AnyAction>, getState: () => IClientState): Promise<void> => {
      return new Promise<void>((resolve) => {
        dispatch(DBActions.connectDatabase())
        setTimeout(() => {
          let connection: (Connection | undefined) = getDBConnection(getState())
          if (connection) {
            dispatch(DBActions.getImports(connection))
            resolve()
          }
        }, 2000)
      })
    }
  }
}

当通过mapDispatchToProps 在组件中添加时，这可以正常工作，但在定义store 后直接在我的store.ts 中调用时不会出现问题。 store.dispatch(DBActions.startDatabase()) 导致：

TS2345: 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>'.

感谢任何帮助和建议！

【问题讨论】：

乍一看，您的类型注释看起来是正确的。你可以尝试从'redux'输入dispatch到Dispatch并通过dispatch<any>(DBActions.connectDatabase())调用的组合，或者保留dispatch的注释，但通过dispatch<AnyAction>(DBActions.connectDatabase())调用，甚至通过dispatch<ThunkAction<...>>(...)调用？
哦，哇，你是对的。真的就是这么简单！ store.dispatch<any>(DBActions.startDatabase()) 工作 :) 非常感谢！
store.dispatch<any> 看起来像是 hack 而不是 IMO 的解决方案。你如何初始化商店？

标签： reactjs typescript redux react-redux redux-thunk

【解决方案1】：

我为此奋斗了一段时间，尝试了不同的类型组合，但无法解决。

原来问题是因为我将redux@4.0.5 和redux@4.1.0 安装在彼此旁边。

要解决我刚刚所做的问题：yarn install redux@^4.1.10，它从我的 yarn.lock 文件中删除了 redux@4.0.5 并解决了问题！

【讨论】：

【解决方案2】：

您可以使用 TypeScript 的 Declaration Merging 扩展 redux 的 Dispatch 接口。使用ThunkDispatch 重载签名扩展Dispatch 接口。然后store.dispatch() 方法可以调度异步操作。

store.ts:

import { applyMiddleware, createStore } from 'redux';
import thunk, { ThunkAction } from 'redux-thunk';
import { DBActions } from './action';

declare module 'redux' {
  interface Dispatch<A extends Action = AnyAction> {
    <S, E, R>(asyncAction: ThunkAction<R, S, E, A>): R;
  }
}

const store = createStore((state) => state, applyMiddleware(thunk));

// dispatch async action
store.dispatch(DBActions.startDatabase()).then(() => {
  console.log(store.getState());
});

// dispatch sync action
store.dispatch(DBActions.connectDatabase());

软件包版本：

"redux": "^4.1.0",
"redux-thunk": "^2.3.0"
"typescript": "^4.2.4"

【讨论】：

【解决方案3】：

我不确定这是否是正确的答案。以下是我的代码：

type MyThunkDispatch = ThunkDispatch<{}, {}, AnyAction>;
const thunkDispatch = store.dispatch as MyThunkDispatch;

thunkDispatch(DBActions.startDatabase());

【讨论】：

【解决方案4】：

避免错误消息的简单解决方法是：

dispatch<any>(DBActions.getImports(connection))

【讨论】：

这可能是一种解决方法，但它让我摆脱了困境。谢谢！
为什么要使用打字稿而不是使用any？
问？我不明白
他可能的意思是，any 禁用了打字稿的目的
啊这就是为什么我说这是一种“解决方法”而不是解决方案！