Dispatch a function with Redux and TypeScript not working

Question

I'm trying to dispatch a function using Redux and Typescript in React, but I'm getting this error:

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

Function 1:

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

Function 2:

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

Function 3:

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

P.S. I know nowadays I should be using Redux Toolkit, but this project is just for educational purposes.

phry · Accepted Answer · 2022-07-08 06:09:19Z

3

Your dispatch functions types are not aware that you have the thunk middleware active.

Please follow the TypeScript Quick Start tutorial to see how to set up your store in a way that the types are in place correctly. You will end up with some kind of AppDispatch type to use instead of the plain Dispatch type here.

answered Jul 8, 2022 at 6:09

phry

44.9k7 gold badges96 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yilmaz · Accepted Answer · 2022-07-08 01:27:45Z

1

for each action you should have an action type defined. for setToastify:

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

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

your setToastify should be like this:

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

you might have more than one action. Define type:

export type Action =
  | SetToastifyAction
  | AnotherAction

herAction

Then use this in your reducer:

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

answered Jul 8, 2022 at 1:27

Yilmaz

51k19 gold badges226 silver badges278 bronze badges

1 Comment

phry Over a year ago

That's a actually a very old style of doing Redux with TypeScript and we do not recommend having individual action types any more - you should not need to write such an implementation detail by hand. See redux.js.org/introduction/why-rtk-is-redux-today for more details and redux-toolkit.js.org/tutorials/typescript for instructions how to set up the types according to the current recommendations.

Collectives™ on Stack Overflow

Dispatch a function with Redux and TypeScript not working

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related