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


У цьому розділі ви створите простий додаток **Менеджер Завдань**.

Додаток дозволятиме користувачам:

* Створювати завдання;
* Позначати завдання як виконані;
* Видаляти завдання;
* Завантажувати початкові завдання з API.



## Структура проєкту

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



## Структура завдання

Кожне завдання виглядатиме так:

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

Ця структура проста, але достатньо реалістична для практики з Redux Toolkit.



Визначено структуру проєкту та формат даних. Це забезпечує чітку основу для побудови стану та функціоналу на наступних етапах.

Дізнайтеся, як керувати складним станом додатка в React за допомогою Redux Toolkit. Зрозумійте, коли Redux дійсно необхідний, створюйте стан за допомогою slices, обробляйте асинхронні дані та поєднуйте все в передбачуваний потік.

Зрозумійте, чому існує Redux Toolkit і коли він стає корисним. Визначте, як складність стану зростає у реальних додатках і чому прості підходи перестають масштабуватися.

Встановлення Redux Toolkit і налаштування сховища. Підключення Redux до React-додатку та розуміння потоку даних у системі.

Визначення стану за допомогою слайсів та чітка організація логіки. Створення редʼюсерів, використання згенерованих дій та підтримка керованості стану під час масштабування застосунку.

Зчитування даних зі сховища за допомогою useSelector та оновлення їх за допомогою useDispatch. Коректна структура стану та уникнення поширених помилок при роботі зі спільними даними.

Отримання даних з API за допомогою createAsyncThunk. Управління станами завантаження та помилок і підтримка синхронізації інтерфейсу користувача з асинхронними оновленнями.

Розділення стану на кілька зрізів і організація файлів за функціональністю. Акуратне об'єднання редукторів і підтримка чіткої структури під час зростання застосунку.

Створення повноцінного застосунку з використанням Redux Toolkit. Реалізація функцій CRUD, обробка асинхронних даних та покращення користувацького досвіду за допомогою станів завантаження та помилок.

Налаштування проєкту та структура даних

Структура проєкту

Структура завдання

Налаштування проєкту та структура даних

Структура проєкту

Структура завдання