Createasyncthunk multiple parameters

Query: createasyncthunk multiple parameters

Answer:

The createAsyncThunk function in Redux Toolkit allows you to define an asynchronous thunk action creator. It provides a convenient way to handle async operations and dispatch other actions based on the async result.

You can pass multiple parameters to the createAsyncThunk function. The first parameter should be a unique string identifier for your thunk action creator. The second parameter is an async function that will be called when the thunk action is dispatched.

Here’s an example:

import { createAsyncThunk } from '@reduxjs/toolkit';

const fetchUserData = createAsyncThunk('user/fetchData', async (userId, thunkAPI) => {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  const data = await response.json();
  return data;
});

// Usage example
dispatch(fetchUserData(123))
    .then((data) => {
        // Handle successful response
    })
    .catch((error) => {
        // Handle error
    });
  

In the above example, we create an async thunk action creator called fetchUserData with the identifier user/fetchData. It takes a userId parameter and uses it to fetch user data from an API endpoint. The returned data is then dispatched as the payload of the action.

You can dispatch this thunk action from your component or another action creator using dispatch(fetchUserData(userId)). You can also handle the returned data or errors using promises, as shown in the example.