Then error reporting of usedispatch in typescript react umijs3

Time:2021-6-11

After the new project started to use umijs3.0, it only has typescript version at present, so it also tries to use typescirpt comprehensively.
TS really has obvious advantages. It has clear variable types, optimization tips, and easy maintenance. It’s also clear from the API. That’s to say, what the project needs to write is twice as much as before. No wonder node gives up TS internally.
The regression problem is as follows:
Then error reporting of usedispatch in typescript react umijs3
If you use then of usedispatch, an error will be reported// @ts-ignoreWe can shield the problem, but we always have a weak mind. We must solve this problem

TS2339: Property 'then' does not exist on type '{ type: string; payload: any; }'.

Online looking for a long time is copied to copy, onlydispatch(action)The asynchronous processing of dispatch is not mentioned. The only article on stackoverflow:
https://stackoverflow.com/questions/59800913/type-safe-usedispatch-with-redux-thunk
It doesn’t solve the problem.
There is no asynchronous processing of dispatch in the official document @ umijs / plugin DVA.
Later, I read the use dispatch description of umijs, react Redux and Redux for a long time, and finally find the definition of dispatch in umijs.

export interface Dispatch<A extends Action = AnyAction> {
  <T extends A>(action: T): Promise<any> | T;
}

Therefore, we try to declare a dispatch type of umijs for the dispatch

import {Dispatch} from 'umi';

const dispatch: Dispatch = useDispatch();

This is the solution to the problem. As shown in the figure:
Then error reporting of usedispatch in typescript react umijs3

Although the result is very simple to solve, but in the process of solving the problem, there are many obstacles. The problem was also raised in GitHub of umijs, but no one answered. I don’t know if the users don’t use the asynchronous processing of dispatch.