Summary  
This chapter demonstrates how to create and handle asynchronous actions in Redux Toolkit using createAsyncThunk, update slice state for loading, success, and error, and dispatch the async fetch action in a component.  

General domain of usage  
Task management applications

Now you add data that comes from outside the app. Instead of starting with an empty list, you will load tasks from an API.





## Creating the Async Action

Update your slice and add `createAsyncThunk`:

```javascript
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

export const fetchTasks = createAsyncThunk('tasks/fetchTasks', async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos?_limit=5');

  if (!response.ok) {
    throw new Error('Failed to fetch tasks');
  }

  return response.json();
});
```





## Handling Async States

Update your slice to track loading and errors:

```javascript
const initialState = {
  items: [],
  status: 'idle',
  error: null
};
```



Add `extraReducers`:

```javascript
extraReducers: (builder) => {
  builder
    .addCase(fetchTasks.pending, (state) => {
      state.status = 'loading';
    })
    .addCase(fetchTasks.fulfilled, (state, action) => {
      state.status = 'succeeded';
      state.items = action.payload;
    })
    .addCase(fetchTasks.rejected, (state, action) => {
      state.status = 'failed';
      state.error = action.error.message;
    });
}
```





## Triggering the Fetch

Dispatch the action when the component loads:

```javascript
import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { fetchTasks } from '../features/tasks/tasksSlice';

function TaskList() {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchTasks());
  }, [dispatch]);
}
```







You added async logic to the application. Tasks are now loaded from an API, and the state tracks loading, success, and error states.


Learn how to manage complex application state in React using Redux Toolkit. Understand when Redux is actually needed, build state with slices, handle async data, and connect everything into a predictable flow. 

Understand why Redux Toolkit exists and when it becomes useful. Recognize how state complexity grows in real applications and why simple approaches stop scaling.

Install Redux Toolkit and set up the store. Connect Redux to a React application and understand how data flows through the system.

Define state using slices and organize logic clearly. Create reducers, use generated actions, and keep state manageable as the application grows.

Read data from the store using useSelector and update it with useDispatch. Structure state correctly and avoid common mistakes when working with shared data.

Fetch data from APIs using createAsyncThunk. Manage loading and error states and keep the UI in sync with async updates.

Split state into multiple slices and organize files by feature. Combine reducers cleanly and maintain a clear structure as the application grows.

Build a complete application using Redux Toolkit. Implement CRUD features, handle async data, and improve the user experience with loading and error states.

Handling Async Data in the App

Creating the Async Action

Handling Async States

Triggering the Fetch