Създаване на действия redux-course-en

АКТУАЛИЗАЦИЯ 2018: Излезе второ издание (модерни версии на код и пакет, това издание е ОСТАРЯЛО)

Създавайте действия

И накрая, стигаме до въпроса за взаимодействието с потребителя на приложението. Почти всяко потребителско действие в интерфейса =действия за изпращане (действия за изпращане)

Като щракнете върху бутона за годината, нашето приложение:

  • задава заглавката
  • качване на снимки от тази година

Сега предлагам да обмислим настройката на заглавката. Качването на снимка изисква асинхронна заявка и за да стигнем до това, трябва да вземем предвид няколко интересни неща. Освен това настройката на заглавката върши страхотна работа, като показва как данните се въртят в приложение за намаляване с прост пример:

  1. Приложението получи първоначалното състояние (първоначално състояние)
  2. Потребителят щракна върху бутона и изпрати действието (действие за изпращане)
  3. Съответният редуктор актуализира част от приложението според това, което е научил от действието.
  4. Приложението е променено и сега отразява новото състояние.
  5. . (всичко се повтаря в кръг, от точка 2)

Това ееднопосочен поток от данни.

Нека създадем действие за страница:

Напомням ви, че полетата тип и полезен товар са просто „мълчаливо“ споразумение. Малко за това можете да прочетете на английски тук.

Поправете редуктора на страницата:

Моля, обърнете внимание, че вторият аргумент - действие - е посочен в аргументите на функцията страница. Това са стандартните аргументи на redux редуктора. Благодарение на това можем лесно да обработваме различни действия по техния тип, влизайки в правилния case раздел на командата switch.

Също така имайте предвид, че непроменихме обекта състояние, но върнахменов с поле за година, равно на action.payload (и следователногодина, избрана от потребителя).

Добавяне на извикване на действия от компоненти

Имаме действие и имаме редуктор, готов да промени състоянието на приложението (да, понякога нарочно пиша тези думи на английски). Но нашият компонент не знае как да извика необходимото действие.

Според таблицата от предишния раздел, за да промените данните, нашият Page.js компонент трябва да извика обратното извикване от this.props, а нашият App.js контейнер трябва да изпрати действието (изпращане на действие).

* Казвам контейнер, въпреки че е по-правилно да се нарича контейнер, но тъй като се генерира от функцията за свързване, базирана на App.js, смятам това за приемливо.

connect , приема "картографирането" на състояние към props като първи аргумент и картографирането на dispatch към props като втори. Колкото и налудничаво да звучи, на практика това означава, че просто трябва да предадем втория аргумент.

Нека започнем с анализиране на mapDispatchToProps. Вътре във функцията използвахме помощна функция от redux - bindActionCreators (изкл. документация, която позволява извикването на setYear, просто казано с някои предположения като:

По този начин необходимата промяна се слуша в магазина на redux и съответно в нашия редуктор на страници.

Следователно, след изпълнението на connect(mapStateToProps, mapDispatchToProps)(App) , получихме нови свойства (реквизити) в App.js, което е ясно демонстрирано от раздела „React“ в инструментите за разработка на chrome.

създаване

Чрез добавяне на setYear към свойствата на Page.js не е трудно да се използва необходимото действие от компонент, който все още не знае нищо за redux.

АКТУАЛИЗАЦИЯ [3/18/16]: Свойството innerText, показано в кода по-долу, е нестандартно и може да причини проблеми в някои браузъри. Вместо това можете да използвате -textContent.

Всъщност кодът на компонентаСтраницата все още е много проста. Редът ::this.onYearBtnClick === this.onYearBtnClick.bind(this) и е необходим, защото React от версия 0.14.x не свързва това с компонента.

Използването на двойно двоеточие е ES7 (експериментална) функция, която е налична в babel с настройката stage=0 (за тези, които са написали кода след раздела „Първи стъпки“, всичко вече е настроено, вижте файла .babelrc)

Главата се оказа доста дълга и най-лошото е, че написахме "куп" код, само за да актуализираме номера в заглавието. Къде е печалбата, както се казва?

Печалбата ще бъде открита допълнително, когато приложението ви расте. Когато ще е необходимо да се поддържат и добавят нови функции. Благодарение наеднопосочния поток от данни (потребител щракнал - извикано действие - редуктор промени състоянието - изобразени промени на компонента), дори в приложение, написано преди много време, ще можете бързо да разберете и да направите необходимите актуализации, които бизнесът изисква. В допълнение, този подход работи чудесно за работа в екип.