Error with redux-toolkit, createAsyncThunk

Question

This is my method in redux:

export const deleteDirectories = createAsyncThunk(
  "directories/deleteDirectories",
  async (id, thunkAPI) => {
    try {
      const response = await axios.delete(`${url}directories/${id}`);
      return response.data;
    } catch (error) {
      return thunkAPI.rejectWithValue("Something went wrong...");
    }
  }
);

And when I try to dispatch it in component, I am getting this error:

Expected 0 arguments, but got 1.
    47 |             variant="primary"
    48 |             onClick={() => {
  > 49 |               dispatch(deleteDirectories(selectedFolderId));
       |                                          ^^^^^^^^^^^^^^^^
    50 |               handleClose();
    51 |             }}
    52 |           >

Can you help me with this?

Answer 1

Try to declare a TS type to the id argument.

import { createAsyncThunk } from '@reduxjs/toolkit';
import React from 'react';
import { useDispatch } from 'react-redux';

const deleteDirectories = createAsyncThunk('directories/deleteDirectories', async (id: number) => {
  return { data: { id } };
});

const App = () => {
  const dispatch = useDispatch();
  dispatch(deleteDirectories(1));
  return <div>app</div>;
};

Playground Link

package versions:

"react-redux": "^7.2.4",
"@reduxjs/toolkit": "^1.9.5"