Это последняя часть из четырех статей, которые я пишу во время 15-недельного учебного курса по разработке программного обеспечения в школе Flatiron в центре Нью-Йорка. В каждой статье я сосредоточусь на теме, которая имеет прямое отношение к моему обучению в настоящий момент. Для меня метакогнитивные преимущества очевидны, и я надеюсь, что они также могут быть полезными ресурсами для моих сверстников. Моя первая статья была о настройке моей собственной пользовательской среды настройки цвета Visual Studio Code. Моя вторая статья была о моем первом использовании Ruby on Rails Resource Generator, который мгновенно создает веб-платформу Full-Stack MVC (модель – представление – контроллер) (CRUD не входит в комплект). В моей третьей статье я описал различные методы стилизации HTML-страниц, в том числе мое последнее открытие Стилизация CSS выполняется динамически из файла JavaScript.

В этой статье я дам концептуальный обзор управления состоянием приложения React с использованием библиотеки реализации Flux, Redux.

Что такое состояние?

В приложении React state - это объект JavaScript. Состояние - это то, что есть только у компонентов класса, в отличие от функциональных компонентов. Он принадлежит компоненту, в котором он объявлен. Его объем ограничен текущим компонентом. Компонент может инициализировать свое состояние и обновлять его при необходимости. Когда состояние передается из текущей области видимости, то есть его компонента, мы называем его реквизитом. Состояние родительского компонента может и часто будет становиться опорой дочернего компонента.

Состояние компонента

Приведенное выше описание относится к состоянию на уровне компонента в React. Каждый компонент имеет собственное состояние, и данные передаются между компонентами в виде свойств, обычно обернутых функциями обратного вызова. Это может хорошо работать для менее сложных приложений, но со временем этот тип архитектуры может стать громоздким. Одно взаимодействие с пользователем может вызвать множественные изменения в DOM, а внутренняя логика для управления состоянием множества компонентов может сделать компонент родительского уровня сложным и громоздким.

Состояние приложения

Facebook, создатель React, быстро осознал необходимость состояния на уровне приложения, объекта состояния, доступного для всех компонентов в приложении. Так родился Flux.

Flux - это шаблон проектирования, как и его предшественник в Facebook, Модель-Представление-Контроллер (MVC).

В отличие от MVC, Flux использует строгую модель однонаправленного потока данных, в некоторой степени отражая поток данных через ветви дерева узлов DOM. Шаблон проектирования Flux состоит из четырех частей.

Взаимодействие пользователя с DOM view триггером actions, описывающим, что случилось с dispatcher, который, в свою очередь, обновляет состояние в store. Изменения в хранилище непрерывно перерисовывают DOM, поскольку взаимодействия с пользователем неоднократно вызывают поведение, описанное выше.

У Facebook есть библиотека с открытым исходным кодом для реализации Flux, но со временем было разработано множество альтернативных библиотек. Из них Redux стал самым популярным, с обширным сообществом разработчиков и поддержки.

Redux

Redux написан всего на 99 строк кода. Вы действительно можете прочитать его и понять весь Redux. В своей основе Redux следует 3 ключевым принципам:

Single source of truth 
The state of your whole application is stored in an object tree within a single store.

State is read-only
The only way to change the state is to emit an action, an object describing what happened.

Changes are made with pure functions
To specify how the state tree is transformed by actions, you write pure reducers.

Уменьшить все

Вместо диспетчера Redux использует редукторы. reducer (также называемый сокращающей функцией) - это функция, которая принимает накопление и значение и возвращает новое накопление.

В Redux накопленное значение - это объект состояния, а накопленные значения - это действия. Редукторы вычисляют новое состояние с учетом предыдущего состояния и действия, следуя основной концепции Flux:

(state, action) => state

Редукторы должны быть чистыми функциями, возвращающими точно такой же вывод для заданных входных данных, без побочных эффектов. Понимание того, что делает функция JavaScript Array.prototype.reduce(), имеет решающее значение для использования Redux.

Согласно глоссарию веб-страниц Redux, редукторы - самая важная концепция в Redux. React и Redux предлагают новые инновационные способы создания и управления потоком данных в DOM и представляют будущее разработки веб-приложений.