带有redux和tyscript不起作用的功能

Question

我正在尝试使用RECT中的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
   }
}

PS我知道现在我应该使用Redux Toolkit，但此项目仅用于教育目的。

Answer 1

您的dispatch函数类型不知道您具有thunk中间件活动。

请关注 typescript快速启动教程如何以某种方式查看如何以某种方式设置您的商店这些类型正确。您最终将获得某种appDisPatch用于使用的类型，而不是普通dispatch在此处类型。

Answer 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

传话

然后在还原器中使用它：

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