Управління станом та бібліотека Redux

Збільшують складність коду

Зменшують ймовірність допущення помилок

Допомагають у керуванні даними при зростанні обсягу коду

Дозволяють автоматично перетворити класові компоненти на функціональні

Зберігати дані безпосередньо в компонентах

Утримувати дані окремо від компонентів у єдиному сховищі (Store)

Збільшувати кількість рендерів компонентів

Зменшувати кількість рендерів компонентів

Відображає дані на екрані

Викликається з View/UI для оновлення даних у Store

Змінює дані у компоненті

Функція, що вміє оновлювати дані у Store

StoreType та ActionName

Payload та ActionValue

ActionType та Payload

InitialValue та SetValue

Функція, що формує та повертає об'єкт Action

Функція, яка визначає тип дії

Об'єкт, що містить Action Type та Payload

Спеціальна бібліотека, що реалізує створення дій використання у reducer

Для прискорення роботи коду

Для приховання типу дії

Для зручності та уникнення помилок при написанні

Тому що у Redux все має бути незмінним (immutable)

State та Action Type

Поточний Store та Action

Action та Payload

Початкове значення стану та Payload

Так як зміна Store може викликати помилку у React

Для спрощення коду

Так як Store в Redux є імутабельним

Зазвичай Redux має декілька екземплярів Store

Для додавання додаткових полів у Store

Так як Reducer має завжди повертати екземпляр Store, інакше буде помилка

Щоб зменшити шанси на колізії з іншими Reducers

Без цього не працює деструктуризація

Store повинен бути змінюваним та містити всю бізнес-логіку додатку.

Reducer повинен змінювати Store напряму, без використання Action.

Reducer - це чиста функція, яка приймає поточний стан Store та Action, і повертає новий стан.

Action приймає Reducer як функцію зворотного виклику (callback), яка серед аргументів має Store, який далі можна змінювати

Збірка усіх Actions в один об'єкт

Створення екземпляра Store

Об'єднання усіх Reducers в один rootReducer

Реалізація декількох Reducer на основі спільного шаблону

Для додавання додаткових полів у Store

Ключі вказують, як звертатися до різних Reducers у Store, наприклад, state.user.name

Для перевірки наявності Reducers в додатку

У функцію combineReducers не передаються ключі

Це призводить до автоматичного видалення всіх даних у Store

Для збереження місця в пам'яті

Store в Redux є імутабельним, тобто його не слід змінювати напряму

Питання провокативне, Store дозволено змінювати напряму в Redux

Змінюючи значення в Store напряму

Використовуючи функцію modifyStore

Використовуючи Dispatch, Action та Reducer, які оновлюють значення у Store

Для доступу до потрібного значення необхідно вказати ключ, що був вказаний у combineReducers

Використовуючи функцію connect з пакету 'redux-connect'

Використовуючи Provider та передаючи йому екземпляр Store

Імпортувати Store у компоненти де потрібні дані зі сховища

З використанням хуку useSelector повернути об'єкт сховища

Для надання стилів компонентам

Для забезпечення доступу до Store для всіх компонентів, розташованих всередині Provider

Для створення нового екземпляру Store

Він дозволя. підключити маршрутизацію у проєктах, що використовують Redux

Звертаючись до Store напряму, використовуючи window.store

Шляхом передачі Store як пропсу в кожен компонент

Автоматично через контекст Provider, безпосередньо в компонентах, розташованих всередині Provider

З використанням спеціального хука useStore

"Props drilling" - це процес витягування кореневого компонента, який містить необхідні пропси, і передача їх вниз через ієрархію компонентів для використання в дочірніх компонентах

"Props drilling" - це патерн у React, коли пропси передаються через кілька рівнів вкладених компонентів, навіть якщо деякі з цих компонентів не використовують ці пропси

"Props drilling" визначається як передача пропсів тільки між безпосередніми сусідніми компонентами в ієрархії React

"Props drilling" - спеціальна бібліотека, яка дозволяє передати пропси у дочірні компоненти, не вказуючи їх явно у тих компонентах, які їх не використовують

Основна проблема полягає в тому, що "props drilling" зовсім не потрібний, і це лише розширює код без додаткової користі

Основна проблема з "props drilling" полягає в тому, що пропси передаються через кожен вкладений компонент, навіть якщо вони потрібні лише останньому компоненту на цьому шляху, що може вплинути на читабельність та підтримку коду

Основна проблема - в тому, що "props drilling" занадто простий і не надає достатньої гнучкості для обробки складних структур даних

Жодної проблеми немає, "props drilling" - це корисний механізм, без якого неможливо передати дані до дочірніх компонентів

Використання контексту (context) в React

Використання бібліотек менеджерів стану (state management) для передачі даних (таких як Redux)

Обмеження зберігання стану у додатках на React, винесення операцій до зовнішнього API (з використанням серверних технологій та баз даних)

Застосування "props drilling" є єдиною прийнятною практикою, і інші рішення недоцільні