Потік даних · Redux documentation in russian
Архітектура Redux обертається навколострого односпрямованого потоку даних.
Це означає, що всі дані в додатку слідують одному патерну життєвого циклу, роблячи логіку Вашої програми більш передбачуваною та легкою для розуміння. Також це сприяє більшій упорядкованості даних (data normalization), так що в кінцевому підсумку у Вас не буде кількох ізольованих копій тих самих даних, які нічого не знають один про одного.
Якщо ви досі не переконані, прочитайте Мотивацію (Motivation) та The Case for Flux для ознайомлення з переконливими аргументами на користь односпрямованого потоку даних. Хоча Redux це не зовсім Flux, він дає такі ж основні переваги.
Життєвий цикл даних у будь-якому Redux-додатку включає 4 кроки:
Дія - це простий javascript-об'єкт, який описує, що трапилося. Наприклад:
Ви можете викликати store.dispatch(action) з будь-якого місця вашої програми, включаючи компоненти та XHR-колбеки або навіть із запланованими інтервалами.
Сховище Redux викликає функцію-редюсер, який ви йому передали.
Сховище передасть два аргументи під час виклику редюсера: поточне дерево стану (current state tree) та дію (action). Наприклад, у todo-додатку головний редюсер може приймати щось таке:
Зверніть увагу на те, що редюсер це чиста функція. Він лише обчислює такий стан. Він має бути цілком передбачуваним: тип даних, що повертаються, не повинен змінюватися, якщо на вхід подаються дані одного типу. Він не повинен здійснювати жодних сайд-ефектів, таких як звернення до API або маршрутизація за програмою. Все це має відбуватися тільки після того, як дія буде вчинена.
Головний редюсерможе комбінувати результат роботи кількох редюсерів в єдине дерево стану програми.
Яким чином ви структуруватимете головний редюсер, залежить тільки від Вас. Redux поставляється з хелпером combineReducers() , корисним для "розділу" головного редюсера на окремі функції, які керують окремими гілками дерева стану.
combineReducers() працює наступним чином. Припустимо, у Вас є два редюсери: один для списку todo-справ, другий — для обраного режиму відображення цього списку:
Коли ви ініціюєте дію, todoApp , яке повернув combineReducers , викличе обидва редюсери:
Потім обидва набори станів знову зібрані в єдиний стан:
Так як combineReducers() - це просто зручна утиліта, ви зовсім не зобов'язані її використовувати. Ви можете написати головний редюсер самостійно!
Сховище Redux зберігає повне дерево стану, яке повертає головний редюсер.
Це нове дерево є наступним станом вашої програми! Кожен слухач, зареєстрований за допомогою store.subscribe(listener), буде викликаний. Слухачі можуть викликати store.getState() для отримання поточного стану програми.
Тепер UI може бути оновлено для відображення нового стану програми. Якщо ви використовуєте такі біндінги (bindings), як React Redux, то це та точка, в якій варто викликати component.setState(newState)
Наступні кроки
Тепер, коли ви знаєте, як працює Redux, давайте зв'яжемо його з React додатком.
Нотатка для досвідчених користувачів
Якщо Ви вже знайомі з основними концепціями і вже освоїли цей посібник, то не забудьте відвідати асинхронний потік (async flow) у посібнику для досвідчених для вивчення того, яксаме middleware змінюють асинхронні дії