nmk

Практичне завдання до Лекції №11: Глобальне керування станом

Тема: Виявлення та впровадження ефективних стратегій керування станом (Context API, Zustand, Redux)

Мета завдання

Навчитися аналізувати архітектуру власного React-додатку, виявляти недоліки односпрямованого потоку даних (Prop Drilling) та обґрунтовано обирати інструменти для глобального керування станом.

---

Завдання 1. Аналіз та детекція “вузьких місць” (Теорія + Аналітика)

1. Дослідіть свій поточний проект. Знайдіть ланцюжок компонентів, де дані передаються через 3 і більше рівні вкладеності (Prop Drilling).
2. Оцініть продуктивність. Знайдіть у вашому коді useState, який використовується в багатьох компонентах через контекст або пропси. Чи призводить зміна цього стану до перерендерингу компонентів, які ці дані не використовують?
3. Обґрунтування. Напишіть коротке пояснення (3-5 речень), чому в обраному місці краще застосувати “важку артилерію” (Zustand або Redux Toolkit), а не залишати все на рівні useState або базового Context API.

Критерії вибору:

• Якщо дані змінюються рідко (тема, мова) -> Context API.
• Якщо дані складні, змінюються часто, або потрібна часткова підписка (кошик, список товарів, чат) -> Zustand / Redux.

---

Завдання 2. Реалізація глобального сховища (Практика)

Впровадьте обрану бібліотеку (Zustand або Redux Toolkit) у ваш проект для вирішення виявленої проблеми.

Варіант А: Zustand (рекомендовано для швидкої розробки)

1. Встановіть бібліотеку: npm install zustand.
2. Створіть файл src/store/useStore.js.
3. Опишіть стан (state) та дії (actions) для вашої бізнес-логіки.
4. Замініть useState та props у компонентах-споживачах на виклик селекторів з useStore.

Варіант Б: Redux Toolkit (рекомендовано для складних систем)

1. Встановіть: npm install @reduxjs/toolkit react-redux.
2. Створіть slice (слайс) для вашої сутності.
3. Налаштуйте store та обгорніть додаток у <Provider>.
4. Використовуйте useSelector та useDispatch у компонентах.

---

Завдання 3. Рефлексія та пояснення (Теорія)

У файлі README.md або окремому звіті дайте відповіді на наступні питання:

1. Які компоненти-посередники вдалося “очистити” від непотрібних пропсів після рефакторингу?
2. Чому ви обрали саме цю бібліотеку (Zustand чи Redux)? Назвіть 2 головні переваги для вашого конкретного випадку.
3. Як змінилася продуктивність? Поясніть, чому тепер при зміні одного поля в глобальному стані не перерендериться весь додаток (механізм селекторів).

---

Критерії оцінювання:

• [20%] Глибокий аналіз коду та правильне виявлення проблеми Prop Drilling.
• [50%] Коректність технічної реалізації (сховище працює, дані оновлюються).
• [30%] Якість пояснення: чіткі аргументи “чому”, розуміння різниці між Context та зовнішнім Store.