Redux Thunk TS return 类型定义

Question

我正在尝试定义我的 Redux Thunk 函数的 returned 类型。

基本上我正在调度一个最终会 return 一个字符串的动作。

所以我写道：

export type AppThunk = ThunkAction<Promise<string>, IState, unknown, Action>;

export const getServiceUrl = (url: string): AppThunk => {
  return async (dispatch) => {
    dispatch(startLoading(retrievingData));
    try {
      const { serviceUrl } = await getJson(url);
      return serviceUrl;
    } catch (error) {
      dispatch(stopLoading());
    }
  };
};

在我的组件中我有：

const serviceUrl = await dispatch(
  getServiceUrl(
    `/api/microservice/email`
  )
);

if (serviceUrl) {
  window.location.assign(redirectUrl);
}

我不断收到 TS2345: Argument of type ‘AppThunk’ is not assignable to parameter of type ‘string | URL。

但是我不明白为什么。

如何声明我的 thunk 函数的 return 类型？

Answer 1

您的 dispatch 可能没有正确键入 - 请确保设置键入的 useDispatch 挂钩，如 TypeScript Quick Start:

中所述

import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import type { RootState, AppDispatch } from './store'

// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch = () => useDispatch<AppDispatch>()
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector