Summary  
This chapter covers using Redux Toolkit’s createAsyncThunk to implement async actions and manage loading, success, and error states through extraReducers in a Redux slice.

General domain of usage  
Front-end web application state management



## What You Are Building

You will fetch data from an API using Redux Toolkit.





## Creating an Async Action

Redux Toolkit provides `createAsyncThunk` to handle async logic.

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

export const fetchPosts = createAsyncThunk(
  'posts/fetchPosts',
  async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    return response.json();
  }
);
```





## Connecting to the Slice

Handle the async action inside your slice:

```javascript
import { createSlice } from '@reduxjs/toolkit';
import { fetchPosts } from './postsThunk';

const postsSlice = createSlice({
  name: 'posts',
  initialState: {
    items: [],
    status: 'idle',
    error: null
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchPosts.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchPosts.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.items = action.payload;
      })
      .addCase(fetchPosts.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  }
});

export default postsSlice.reducer;
```





`createAsyncThunk` lets you handle async logic in a structured way. It automatically tracks loading, success, and error states.



Tutustu Redux Toolkitiin yhdessä Reactin kanssa ja tehosta tilanhallintataitojasi. Tämä kurssi esittelee kattavasti Redux Toolkitiin, tehokkaan kirjaston tilanhallintaan. Opit yksinkertaistamaan Reduxin käyttöönottoa, selkeyttämään monimutkaista tilalogiikkaa ja luomaan tehokkaita, skaalautuvia React-sovelluksia.

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.

Fetching Data with createAsyncThunk

What You Are Building

Creating an Async Action

Connecting to the Slice