Як працює Redux простими словами
Передача даних між компонентами React часто нагадує гру «зіпсований телефон». Ви передаєте дані від батьківського компонента до дочірнього, а потім до онука. Коли ваш застосунок розростається, це стає занадто заплутаним.
Redux вирішує цю проблему. Він створює єдине джерело істини. Замість розрізнених даних усе зберігається в одному центральному сховищі.
Щоб зрозуміти Redux, уявіть кав'ярню.
Store (Сховище) Це книга обліку кав'ярні. У ній фіксується кількість зерен, замовлення та списки персоналу.
Action (Замовлення)
Клієнт не бере лате просто з прилавка. Він робить замовлення. Action — це простий об'єкт, який описує, що саме сталося.
Приклад: { type: 'ADD_TODO', text: 'Buy Milk' }
Reducer (Бариста) Бариста — єдина людина, яка оновлює книгу обліку. Він бере поточний стан (state) та нове замовлення, а потім створює нову версію книги обліку.
Dispatch (Касир) Касир приймає ваше замовлення та передає його баристі. Dispatch — це функція, яка відправляє ваш action у store.
Навіщо використовувати Redux?
Коли ваш застосунок розростається і починає включати профілі користувачів або кошики для покупок, центральне сховище полегшує налагодження (debugging). Ви можете переглянути історію дій (action history), щоб побачити, коли і чому дані змінилися. Це працює як бортовий самописець для вашого вебсайту.
Підсумок:
• Action: Запис, що описує зміну. • Reducer: Логіка, яка виконує зміну. • Dispatch: Тригер, який відправляє action до логіки.
Джерело: https://dev.to/code_with_aravind/how-redux-works-in-simple-terms-1pkp