4. What are the lifecycle actions automatically created by createAsyncThunk?

Q: 4. What are the lifecycle actions automatically created by createAsyncThunk?

When you create an async thunk using `createAsyncThunk` in Redux Toolkit, it automatically generates three distinct action types that represent the lifecycle of an asynchronous operation — `pending`, `fulfilled`, and `rejected`. **1. pending:** Dispatched when the async function is first called. Typically used to set a loading state or show a spinner in the UI. **2. fulfilled:** Dispatched when the async operation completes successfully. The returned data becomes the action’s payload. **3. rejected:** Dispatched when the async operation fails due to an error, timeout, or rejection. Contains the error message for debugging or display. import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'; export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => { const response = await fetch('/api/posts'); return response.json(); }); const postsSlice = createSlice({ name: 'posts', initialState: { data: [], status: 'idle', error: null }, extraReducers: (builder) => { builder .addCase(fetchPosts.pending, (state) => { state.status = 'loading'; }) .addCase(fetchPosts.fulfilled, (state, action) => { state.status = 'succeeded'; state.data = action.payload; }) .addCase(fetchPosts.rejected, (state, action) => { state.status = 'failed'; state.error = action.error.message; }); }, }); These lifecycle actions allow developers to handle loading, success, and error states in a predictable and structured way, reducing boilerplate and improving async flow management.

Difficulty: 5/10

createAsyncThunk, lifecycle actions, extraReducers

Lifecycle Actions in createAsyncThunk

When you create an async thunk using createAsyncThunk in Redux Toolkit, it automatically generates three distinct action types that represent the lifecycle of an asynchronous operation — pending, fulfilled, and rejected.

Lifecycle Actions Created Automatically

1
1. pending: Dispatched when the async function is first called. Typically used to set a loading state or show a spinner in the UI.

4. What are the lifecycle actions automatically created by createAsyncThunk?

Difficulty: 5/10

createAsyncThunk, lifecycle actions, extraReducers

Lifecycle Actions in createAsyncThunk

Lifecycle Actions Created Automatically

1
1. pending: Dispatched when the async function is first called. Typically used to set a loading state or show a spinner in the UI.

4. What are the lifecycle actions automatically created by createAsyncThunk?

Lifecycle Actions in createAsyncThunk

4. What are the lifecycle actions automatically created by createAsyncThunk?

Lifecycle Actions in createAsyncThunk

Scenario Questions

Follow-up Questions