React — это библиотека JavaScript для создания пользовательских интерфейсов. То, как React использует односторонний поток данных и виртуальный DOM, идеально подходит для создания быстрых и сложных приложений на основе компонентов, которые произвели революцию в том, как мы привыкли создавать приложения. Несмотря на то, что React прост и очень быстр, это библиотека, используемая для разработки только части просмотра традиционных приложений MVC или MVVC, поэтому она не управляет состоянием приложения и нуждается в других библиотеках или фреймворках, которые могут обрабатывать состояние приложения. Чтобы справиться с этим, разработчики Facebook разработали Flux, представляющий собой архитектуру приложений для создания клиентских приложений. Существуют разные способы реализации архитектуры Flux, и Redux — это один из способов реализации Flux.
Redux — это контейнер состояния для приложений JavaScript, разработанный Дэном Абрамовым для управления состоянием приложения, и его основное отличие от того, как Facebook реализовал Flux, заключается в том, что Redux использует одно хранилище для приложения, реализованного с использованием редюсеров и этого состояния. нельзя мутировать.
Чтобы продемонстрировать поток данных в Redux, я попытаюсь реализовать простое приложение todo. Исходный код можно найти в этом репозитории github.
Поток Redux начинается с компонентов реагирования, когда когда-либо возникает новое событие в компоненте, которое нам нужно для создания действия с создателями действий. Действие в Redux — это объект, который должен содержать свойство типа действия, которое позже поможет редюсерам определить, какое действие произошло, а также необязательную полезную нагрузку.
В приведенных выше создателях действий у нас есть создатели действий, которые нужно вызывать из компонентов реакции со значением и отправлять редюсерам. Каждое отправленное действие должно иметь тип и необязательные данные (в данном случае полезная нагрузка). когда действие инициируется, оно отправляется всем доступным редьюсерам, и соответствующий редьюсер будет соответствующим образом обрабатывать состояние приложения.
давайте сначала посмотрим на редукторы.
когда действие отправлено, redux обратится к каждому редьюсеру и спросит, заботятся ли они об отправленном действии, если они это сделают, они обработают его соответствующим образом, а если нет, они вернут состояние. В todoReducer мы изначально инициировали состояние пустого массива (способ присвоения значения по умолчанию в ES6, если состояние не передано), и мы включим тип действия. Если случай совпадает с отправленным действием, мы изменим состояние в хранилище и повторно отобразим реагирующие компоненты. Как я уже говорил ранее, состояние в Redux должно быть неизменяемым, и именно поэтому мы возвращаем новое состояние вместо изменения существующего состояния.
У нас может быть несколько редьюсеров, которые обрабатывают разные части состояния приложения, но Redux использует одно хранилище, и нам нужно объединить все редюсеры, чтобы создать одно хранилище. мы достигаем этого, используя combineReducers Redux.
В приведенном выше коде мы объединили имеющиеся у нас редукторы (в данном случае один), чтобы создать rootReducer, который мы позже передадим в хранилище приложения.
Теперь, когда мы создали генераторы и редьюсеры действий, пришло время создать хранилище и передать его компонентам реагирования.
В записи приложения мы импортировали react, render из react-dom (помогите нам отрендерить в index.html), Provider — это компонент react-redux, который поможет нам передать наш магазин в приложение, и мы импортировали createStore и applyMiddleware от redux, который помогает нам создавать хранилище и передавать хранилище через промежуточное ПО соответственно.
в приведенном выше коде мы создали хранилище и передали ему rootReducers, а хранилище передается в приложение с помощью компонента Redux Provider. Теперь, когда у нас создано наше хранилище, давайте создадим компоненты реакции и подключим их к состоянию приложения и действиям отправки.
На данный момент мы создали контейнеры, которые нам нужно подключить к хранилищу через компоненты redux и dam для отображения формы.
Мы создали необходимые действия, редукторы и компоненты независимо друг от друга, и чтобы соединить все вместе, нам нужно получить доступ к состоянию приложения и отправить его компонентам, и мы делаем это, подключаясь к Redux.
Чтобы подключить компоненты контейнера к redux, нам нужно импортировать connect из модуля react-redux и экспортировать connect по умолчанию.
Основная цель функции подключения — предоставить контейнеру доступ к свойствам, и мы делаем это с помощью функции mapPropToState, которая принимает состояние в качестве аргумента и возвращает соответствующее значение из состояния, к которому нам нужен доступ, и мы делаем это. что с помощью this.props. Вторым аргументом функции подключения является action, чтобы получить доступ к действиям из компонента, нам нужно импортировать их все с помощью *, а затем передать их в функцию подключения, и доступ к ним можно получить с помощью this.props в компонент.
Наконец, мы создали фиктивный компонент для отображения списка задач и импортировали его в наш компонент-контейнер.
Теперь, когда мы можем добавлять элементы todoItem в наш список, я оставлю вам возможность реализовать удаление элемента из списка, и, чтобы упростить его, мы уже сделали создателя действия и редуктор, который мог бы справиться с этим.
