javascript - Ejecutar una función con Redux y TypeScript no funciona

Estoy tratando de despachar una función usando Redux y Typescript en React, pero estoy recibiendo este error:

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

Función 1:

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

Función 2:

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

Función 3:

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

P.D. Sé que hoy en día debería estar usando Redux Toolkit, pero este proyecto es solo con fines educativos.

Respuesta #1

Los tipos de tus funciones dispatch no son conscientes de que tienes activo el middleware thunk.

Por favor, sigue el tutorial de Inicio Rápido de TypeScript para ver cómo configurar tu tienda de manera que los tipos estén correctamente en su lugar. Terminarás con algún tipo de AppDispatch para usar en lugar del tipo simple Dispatch aquí.

Respuesta #2

para cada acción deberías tener un tipo de acción definido. para setToastify:

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

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

tu setToastify debería ser así:

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

podrías tener más de una acción. Define el tipo:

export type Action =
  | SetToastifyAction
  | AnotherAction

suAcción

Luego usa esto en tu reductor:

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