Summary  
This chapter covers organizing a project’s directory structure and defining the shape of data objects for state management.

General domain of usage  
Task management applications


In this section, you will build a simple **Task Manager** app.

The app will allow users to:

* Create tasks;
* Mark tasks as completed;
* Delete tasks;
* Load initial tasks from an API.



## Project Structure

```bash
src/
  app/
    store.js
  features/
    tasks/
      tasksSlice.js
  components/
    TaskForm.jsx
    TaskList.jsx
    TaskItem.jsx
  App.jsx
  main.jsx
```



## Task Shape

Each task will look like this:

```javascript
{
  id: 1,
  title: 'Learn Redux Toolkit',
  completed: false
}
```

This structure is simple, but realistic enough to practice Redux Toolkit properly.



You defined the structure of the project and the shape of the data. This gives you a clear foundation for building state and features in the next steps.

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.

Project Setup and Data Structure

Project Structure

Task Shape

Project Setup and Data Structure

Project Structure

Task Shape