Какое отношение Redux имеет к Flux? Как Dispatch связан с Action и как я могу изменить представление моего компонента?
В этой статье мы обсудим, как Flux связан с Redux и на примерах кода, как реализовать Redux в приложении React. Итак, давайте не будем больше ждать!
Вид компонента
Представление — это компонент пользовательского интерфейса. Он отвечает за визуализацию пользовательского интерфейса и обработку взаимодействия с пользователем.
Создатель действий
Действие — это простой объект, содержащий всю информацию, необходимую для выполнения этого действия. У действий есть свойство type, определяющее тип действия.
Практика Action Creator заключается в том, чтобы инкапсулировать код, создавая действия в функциях. Эти функции, которые создают и отправляют действия, называются создателями действий.
Диспетчер
Диспетчер — это единый объект, который рассылает действия/события во все зарегистрированные магазины. Магазинам необходимо регистрироваться на события при запуске приложения.
Магазин
Магазин отслеживает все действия и решает, какие из них предпринять. Обычно это означает оператор switch. Как только магазин изменяет состояние, он генерирует событие изменения. Магазин является генератором событий.
Хорошо, но какое отношение Flux имеет к Redux, кроме окончания двух слов «ux»…? Redux ожил, когда Дэн Абрамов спросил себя: «Что, если бы ваш магазин Flux был не магазином, а функцией редюсера?»
Redux был создан в 2015 году Дэном Абрамовым и Эндрю Кларком (автором реализации Flux Flummox).
Является библиотекой управления состоянием для интерфейсных приложений. Разработчики обычно используют его с React через пакет react-redux, но он также может использоваться отдельно — так что вы можете использовать его в любой внешней среде или библиотеке, включая ванильный JavaScript.
Редукторы
Редьюсеры будут обновлять состояние на основе actionType, эти действияявляются объектами, которые определяют, что будет сделано. Редукторы принимают состояние и действие.
Создайте папку и назовите ее Redux, теперь добавьте папку с именем reducers и добавьте файл для следующего редьюсера. , назовите его, например, counterReducer.
В этом случае мы создаем счетчик, который имеет начальное состояние «1» и зависит от actionType «INCREMENT», «DECREMENT» или «RESET», он вернет новое состояние, измененное с помощью «+ 1», «- 1”или“0”.
Мы также должны вернуть состояние по умолчанию, которое вернет состояние «1», если ни один из определенных actionType не вызывается.
ОбъединитьРедукторы
Важно создать файл, в котором мы будем хранить все наши редукторы. В нашу папку reducers добавьте индексный файл для этой части кода. Мы будем использовать вспомогательную функцию объединения редукторов из Redux.
В этом индексном файле мы напишем следующий код, чтобы определить все наши редукторы в переменной с именем rootReducer, поскольку у нас есть только один редьюсер, у нас будет только наш контрредьюсер.
Магазин
Мы создадим папку с именем store, добавим внутрь индексный файл, где будет расположен наш магазин.
Сначала мы собираемся создать магазин, а затем импортировать его в наш index.jsx.
Прежде всего, мы видим composeEnhancers,это очень интересное расширение для Chrome, которое позволит нам проверять состояние цикла Redux нашего приложения. Здесь у вас есть видеоурок, чтобы узнать больше об этом, просто нажмите здесь (для урока на испанском языке) и здесь (для урока на английском языке).
Теперь, когда мы создали наш магазин, мы импортируем его в наш index.jsx.
Нам нужно импортировать Provider из react-redux и обернуть им все приложение в нашем индексном файле. Поставщик связывает глобальное состояние с приложением. Провайдер принимает аргумент с именем store, в который мы должны передать созданный store.
Идеально! Мы почти закончили, давайте извлечем наши редукторы и настроим действия, чтобы мы могли применить их в нашем приложении!
Извлеките редьюсеры и настройте действия
Нам нужно создать функцию для каждого actionType, и это имя будет тем, которое мы определили в нашем редюсере, поэтому в нашем случае «INCREMENT», «DECREMENT» и «RESET» . Мы создадим этот файл в папке с именем actions и с именем index.
Теперь, когда мы экспортировали функции с нашим actionType, мы можем использовать их в нашем приложении для отправки действия и изменения состояния наши данные.
Отправка действий
Теперь нам просто нужно вызвать наши функции с помощью dispatch с помощью useDispatch hook, а затем он перейдет к reducer. и наш переключатель (в зависимости от типа действия) изменит наше состояние.
В этом случае диспетчер будет вызываться всякий раз, когда мы нажимаем кнопку «Увеличить», «Сбросить» или «Уменьшить», после чего диспетчер выполнит работу в зависимости от того, какая функция вызывается.
Так и будет!!!!!! Поздравляем, вы только что узнали, как реализовать шаблон Redux!!! 🎉🎉🎉
Надеюсь, вам понравился этот урок, и я надеюсь, что вы многому научились из него. Теперь ваша очередь применить это на практике! Не ждите больше и введите код!
