Реагировать В настоящее время является самой популярной библиотекой JavaScript для создания пользовательских интерфейсов и Redux (Используется в сочетании с React Redux ) является наиболее широко используемой библиотекой управления государством для приложений React.
Понимание того, как течет данные в таких приложениях, имеет решающее значение, если вы являетесь инженером-интерфейсом, работающим с React.
Давай пройдемся через это вместе!
Основные части приложения React + Redux
Есть несколько важных понятий, которые составляют приложение React + Redux, которые необходимы для понимания:
Redux Store
Store Redux – это объект, который удерживает состояние вашего приложения. Магазин является источником истины для данных и доступен для любого компонента в вашем приложении, которое подключено к нему через подключить метод
Составные части
Компоненты – это строительные блоки, которые составляют пользовательский интерфейс. Компоненты могут быть такими же маленькими, как кнопка или аватар, или они могут быть такими же большими, как контейнер или страница (или даже компонент верхнего уровня, который содержит все приложение).
Компоненты, подключенные к магазину, могут читать глобальное состояние приложения, а также запустить создателей действий, которые мы рассмотрим дальше.
Создатели действий
Создатели действий – это функции, которые возвращают простой объект, называемый действие Анкет Создатели действий обычно вызываются, когда пользователь взаимодействует с пользовательским интерфейсом (например, при нажатии на кнопку) или в определенных точках в жизненном цикле компонента (например, когда компонент монтируется).
По умолчанию создатели действий синхронно, но вы можете использовать промежуточное программное обеспечение Redux, например Redux Thunk или Redux Saga обращаться с асинхронными создателями действий. На данный момент мы просто сосредоточимся на синхронном коде.
Действия
Действия, как упомянуто выше, являются простыми объектами. Действия имеют Тип свойство, которое является просто строковой константой, которая идентифицирует действие.
Действия могут также содержать любые другие данные, поэтому вы можете включить полезная нагрузка собственность или userid собственность или все, что вы хотите.
Редукторы
Редакторы – это чистые функции, которые принимают предыдущее состояние и действие, а затем возвращают обновленную копию состояния.
Поток приложения React + Redux
Теперь, когда вы знаете важные части приложения React + Redux, диаграмма может быть полезна для визуализации потока приложения React + Redux.
Обратите внимание, что поток здесь однонаправленный : Это идет только в одном направлении. Это невероятно полезно в том, как работает ваше приложение, и когда вам нужно делать некоторые устранения неполадок, чтобы отслеживать надоедливую ошибку.
Пример рабочий процесс
Давайте посмотрим, как может выглядеть типичный рабочий процесс.
Допустим, у вас есть очень простое встречное приложение. На странице есть кнопка, которую вы можете нажать, чтобы увеличить счетчик, и текущее значение счетчика также отображается на странице.
Рабочий процесс выглядит так:
- Стоимость счетчика удерживается в Магазин Анкет
- Кнопка компонент связан с хранить так что когда пользователь нажимает кнопку,
OnclickХэндлер может вызвать Создатель действий , которая является простой функцией, которую мы назваемIncrementCounterАнкет - Это
IncrementCounterСоздатель действий Затем возвращает действие , который является простым объектом, который выглядит как:{type: INGREMENT_COUNTER}Анкет - Reducer затем обрабатывает это действие. Рудовой знает, что когда он получает действие с типом
INGRENT_COUNTER, он должен увеличить значениесчетчиксобственность в штате одним. - Государство в Магазин затем обновляется, и значение счетчика уходит от
0к1Анкет - Счетчик -дисплей в пользовательском интерфейсе подключен к Магазин Поэтому, когда состояние меняется, пользовательский интерфейс обновляется, чтобы отразить эти изменения. Итак, пользователь теперь видит значение
1на экране.
Если пользователь снова нажимает на кнопку, весь этот процесс повторил бы, увеличивая значение счетчика к 2 Анкет
Демо -код
Пример простого приложения React + Redux можно найти в этом GitHub Repo Анкет Вы также можете просмотреть живая демонстрация здесь Анкет
Спасибо за чтение!
Оригинал: “https://dev.to/thawkin3/understanding-the-flow-of-a-react-redux-application-15hj”