Поток на данни Redux
Архитектурата Redux се върти околостриктно еднопосочен поток от данни.
Това означава, че всички данни в едно приложение следват един и същ модел на жизнения цикъл, което прави логиката на вашето приложение по-предсказуема и по-лесна за разбиране. Той също така насърчава повече нормализация на данните, така че да не се окажете с множество изолирани копия на едни и същи данни, които не знаят нищо едно за друго.
Ако все още не сте убедени, прочетете Motivation и The Case for Flux за убедителен аргумент за еднопосочен поток от данни. Въпреки че Redux не е точно Flux, той предоставя същите основни предимства.
Жизненият цикъл на данните във всяко приложение Redux включва 4 стъпки:
Действието е прост обект на javascript, който описва случилото се. Например:
Можете да извикате store.dispatch(action) от всяко място във вашето приложение, включително компоненти и XHR обратни извиквания, или дори на планирани интервали.
Магазинът Redux извиква редукционната функция, която сте му предали.
Магазинът ще предаде два аргумента при извикване на редуктора: дървото на текущото състояние и действието. Например в приложение за задачи основният редуктор може да приеме нещо подобно:
Имайте предвид, че редукторът е чиста функция. Той само изчислява следващото състояние. Трябва да бъде напълно предсказуем: типът на върнатите данни не трябва да се променя, ако входът е от същия тип. Не трябва да извършва никакви странични ефекти като извикване на API или маршрутизиране през приложението. Всичко това трябва да се случи само след приключване на действието.
Основен редукторможе да комбинира изхода на множество редуктори в едно дърво на състоянието на приложението.
Как ще структурирате основния редуктор зависи от вас. Redux се доставя с помощника combineReducers(), полезен за "разделяне" на главния редуктор на отделни функции, които управляват отделни клонове на дървото на състоянието.
combineReducers() работи по следния начин. Да приемем, че имате два редуктора: един за списъка със задачи, вторият за текущо избрания режим на показване на този списък:
Когато задействате действие, todoApp, върнат от combineReducers, ще извика и двата редуктора:
Тогава и двата набора от състояния ще бъдат събрани отново в едно състояние:
Тъй като combineReducers() е просто помощна програма за удобство, изобщо не е нужно да я използвате. Можете сами да напишете основния редуктор!
Магазинът Redux съхранява пълното дърво на състоянието, което връща главният редуктор.
Това ново дърво е следващото състояние на вашето приложение! Всеки слушател, регистриран с store.subscribe(listener), ще бъде извикан. Слушателите могат да извикат store.getState(), за да получат текущото състояние на приложението.
Потребителският интерфейс вече може да се актуализира, за да отразява новото състояние на приложението. Ако използвате обвързвания като React Redux, тогава това е точката за извикване на component.setState(newState)
Следващи стъпки
След като вече знаете как работи Redux, нека го свържем с приложение на React.
Забележка за напреднали потребители
Ако вече сте запознати с основните понятия и вече сте усвоили този урок, не забравяйте да посетите асинхронния поток в урока за напреднали, за да научите кактова е междинен софтуер, който променя асинхронните действия