Typescript Error: Argument of type '{ task: string; }' is not assignable to parameter of type 'void'

Question

Getting this error when trying to pass an argument through the dispatch method.

Error: Argument of type '{ task: string; }' is not assignable to parameter of type 'void'

index.tsx:

import store from "../store/configureStore";
import { addTask, completeTask, removeTask } from "../store/tasks";

export default function Gallery() {
  /* store.subscribe(() => {
    console.log("Updated", store.getState());
  }); */
  // console.log(addTask({ task: "Task 1" }));
  store.dispatch(addTask({ task: "Task 1" })); // getting error on these dispatch method lines
  store.dispatch(addTask({ task: "Task 2" })); //
  console.log(store.getState());
  store.dispatch(completeTask({ id: 1 }));     //
  store.dispatch(removeTask({ id: 1 }));       //
  // store.dispatch(fetchTodo());
  console.log(store.getState());

tasks.js:

// Actions
export const addTask = createAction("ADD_TASK");
export const removeTask = createAction("REMOVE_TASK");
export const completeTask = createAction("TASK_COMPLETED");

Using Redux-Thunk it works but not with Redux-Toolkit.

Answer 1

You are using Typescript, so you must type the action payloads you are passing.

Example:

export const addTask = createAction<{ task: string }>("ADD_TASK");
export const removeTask = createAction<{ id: number }>("REMOVE_TASK");
export const completeTask = createAction<{ id: number }>("TASK_COMPLETED");

store.dispatch(addTask({ task: "Task 1" }));
// dispatches { type: "ADD_TASK", payload: { task: "Task 1" } }

store.dispatch(addTask({ task: "Task 2" }));
// dispatches { type: "ADD_TASK", payload: { task: "Task 2" } }

store.dispatch(completeTask({ id: 1 }));
// dispatches { type: "TASK_COMPLETED", payload: { id: 1 } }

store.dispatch(removeTask({ id: 1 }));
// dispatches { type: "REMOVE_TASK", payload: { id: 1 } }