10. How can you chain multiple async thunks?

Question

Accepted Answer

In Redux Toolkit, you can chain multiple async thunks by dispatching one thunk after another, often based on the result of the previous one. Since thunks return a promise, you can use async/await or .then() to coordinate multiple asynchronous actions sequentially. **1. Use async/await in a component or another thunk:** Wait for one thunk to resolve before dispatching the next. **2. Access the result using unwrap():** The unwrap() method allows you to get the fulfilled value or throw an error from a dispatched thunk. **3. Chain using .then():** You can use standard promise chaining for dependent async calls. import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

export const fetchUser = createAsyncThunk('user/fetchUser', async (userId) => {
  const response = await fetch(`/api/users/${userId}`);
  if (!response.ok) throw new Error('Failed to fetch user');
  return response.json();
});

export const fetchPostsByUser = createAsyncThunk('posts/fetchByUser', async (userId) => {
  const response = await fetch(`/api/users/${userId}/posts`);
  if (!response.ok) throw new Error('Failed to fetch posts');
  return response.json();
});

// Example: Chaining inside a component or another thunk
export const loadUserAndPosts = () => async (dispatch) => {
  try {
    const user = await dispatch(fetchUser(1)).unwrap();
    await dispatch(fetchPostsByUser(user.id)).unwrap();
  } catch (err) {
    console.error('Error loading user or posts:', err);
  }
}; By chaining thunks with unwrap() or async/await, you can manage complex async workflows cleanly — for example, fetching a user first and then their related posts once the user data is available.

10. How can you chain multiple async thunks?

Chaining Multiple Async Thunks in Redux Toolkit

10. How can you chain multiple async thunks?

Chaining Multiple Async Thunks in Redux Toolkit

Scenario Questions

Follow-up Questions