3. How does createAsyncThunk simplify async actions?

Question

Accepted Answer

`createAsyncThunk` in Redux Toolkit simplifies the process of handling asynchronous logic, such as API calls, by automatically generating action types and handling the common async states — pending, fulfilled, and rejected. **1. Automatic Action Type Generation:** It automatically creates three action types (`pending`, `fulfilled`, `rejected`) for each async operation. **2. Reduced Boilerplate:** You don’t need to manually define separate actions or dispatch multiple types for loading and error states. **3. Centralized Async Logic:** Keeps async logic in one place (inside the thunk), improving code readability and maintainability. **4. Easy Integration with createSlice:** Works seamlessly with `extraReducers` to manage async state transitions declaratively. **5. Built-in Error Handling:** Automatically catches errors and passes them to the rejected action for consistent error handling. import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

// Define async thunk
export const fetchUsers = createAsyncThunk('users/fetchUsers', async () => {
  const response = await fetch('/api/users');
  return response.json();
});

// Create slice
const usersSlice = createSlice({
  name: 'users',
  initialState: { data: [], status: 'idle', error: null },
  extraReducers: (builder) => {
    builder
      .addCase(fetchUsers.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchUsers.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.data = action.payload;
      })
      .addCase(fetchUsers.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  },
}); Overall, `createAsyncThunk` eliminates repetitive async setup code and enforces a predictable, structured approach for managing async requests in Redux Toolkit.

3. How does createAsyncThunk simplify async actions?

Simplifying Async Actions with createAsyncThunk in Redux Toolkit

3. How does createAsyncThunk simplify async actions?

Simplifying Async Actions with createAsyncThunk in Redux Toolkit

Scenario Questions

Follow-up Questions