javascript - 使用 Redux 和 TypeScript 分发函数无法工作

我正在尝试在 React 中使用 Redux 和 TypeScript 调度一个函数，但我遇到了这个错误：

Argument of type '(dispatch: Dispatch) => void' is not assignable to parameter of type 'AnyAction'

功能 1：

const postProducts = (origin: string) => {
   return (dispatch: Dispatch) => {
      dispatch(initProducts(origin))
   }
}

功能 2：

export const initProducts = (origin: string) => {
   return (dispatch: Dispatch) => {
      if (origin !== 'load') {
         dispatch(setToastify(errorMsg))
      }
   }
}

功能 3：

export const setToastify = (toastifyDetails: string, open = true) => {
   return {
      type: ActionType.SET_TOASTIFY,
      toastify: toastifyDetails,
      open: open
   }
}

附言：我知道现在我应该使用 Redux Toolkit，但这个项目只是为了教育目的。

答案＃1

你的 dispatch 函数类型并不了解你已经启用了 thunk 中间件。

请按照 TypeScript 快速入门教程，了解如何正确设置商店以确保类型正确。最终，您将获得某种 AppDispatch 类型，以替代这里的普通 Dispatch 类型。

答案＃2

对于每个操作，你应该定义一个操作类型。对于 setToastify:

import { ActionType } from "../action-types";

export interface SetToastifyAction {
  type: ActionType.SET_TOASTIFY;
  payload: {
    toastifyDetails: string;
    open: boolean;
  };

你的 setToastify 应该是这样的:

export const setToastify = (toastifyDetails: string, open = true):SetToastifyAction => {
   return {
      type: ActionType.SET_TOASTIFY,
      toastify: toastifyDetails,
      open: open
   }
}

你可能有不止一个操作。定义类型：

export type Action =
  | SetToastifyAction
  | AnotherAction

她的动作

然后在你的 reducer 中使用这个：

  (state: YourStateType = initialState, action: Action):  YourStateType => {