Управління станом

Вимоги до функціоналу додатків постійно зростають, у результаті збільшується кількість станів інтерфейсу: асинхронне завантаження даних, індикатори завантаження даних, значення фільтрів під час сортування, стан форм тощо. Бібліотеки управління станом стандартизують зберігання та роботу зі станом програми, тим самим спрощуючи процес розробки.

Redux це одна з найпопулярніших бібліотек керування станом програми.

• Передбачуваність результату - існує завжди одне джерело правди, стор (сховище, store), що приховує у собі стан програми та методи для роботи з ним.
• Підтримуваність - є набір правил та кращих практик про те, як повинен бути структурований код, що робить його більш одноманітним та зрозумілим.
• Інструменти розробника - зручне розширення браузера в якому надається максимум інформації про стан програми в режимі реального часу.

Потік даних

Без використання бібліотеки управління станом, процес поновлення даних виглядає наступним чином:

• Стан зберігається в найближчому загальному компоненті предка.
• Який-то вкладений компонент ініціалізує зміну стану викликавши метод отриманий як пропс.
• Змінений стан прокидається пропсами вниз по дереву компонентів.

Подивіться на анімовану ілюстрацію цього процесу, на якій показано приклад зміни стану у різних частинах програми.

Деякі компоненти виступають провідниками, тобто отримують пропс тільки для того, щоб прокидати його ще глибше, до компонента якому він справді потрібний. Спочатку потрібно прокидати через усе дерево компонентів метод зміни стану, потім сам стан. Це стандартний механізм передачі пропсів на декілька рівнів у глибину, змінити його не можна.

Redux вирішує цю проблему створенням стора (сховища, store), який відповідає за централізоване зберігання всього стану та надає набір правил та методів для його зміни. Компонентам залишається викликати методи для оновлення даних та підписатися на оновлення. Таким чином, Redux вирішує проблему передачі пропсів через всі компоненти дерева.

Потік даних у Redux завжди односпрямований, від компонентів до стору, та від стора до компонентів без посередників. Це робить логіку програми більш передбачуваною та легкою для розуміння.

• Користувач, працюючи з інтерфейсом, ініціалізує відправку екшенів (дій, actions).
• Стор (store) викликає всі оголошені редюсери (reducers), функції для зміни стану, передаючи їм поточний стан (state) та екшен (дія, action).
• Стор (store) зберігає оновлений стан (state) повернутий з редюсерів (reducers).
• При оновленні стану (state) повторно рендеруються залежні від нього компоненти.

Плюси і мінуси

Redux це лише інструмент для управління станом програми, який призначений для того, щоб допомогти відповісти на запитання – «Коли і як змінилася певна частина стану». Якщо у вас немає проблем із керуванням станом використовуючи можливості React, вам може бути важче зрозуміти переваги Redux. Можливо стан React це все, що вам потрібно для створення програми.

Необхідність використовувати бібліотеку управління станом не слід сприймати як належне. Якщо додаток стає настільки складним, що ви не розумієте, де зберігається стан, як воно змінюється, і ви виявите, що зберігання даних у стані компонента React вже недостатньо, тоді саме час використовувати Redux.

Тим не менш, використання Redux потребує компромісів. Він не створений щоб бути найкоротшим або найшвидшим способом написання коду. Redux накладає певні вимоги: зберігати стан програми у вигляді простої структури даних (стор), описувати зміни об'єктами (екшени) та обробляти ці зміни за допомогою чистих функцій (редюсери).