Сегодня я буду обсуждать, как настроить редукцию в реактивном проекте.
Да, вы, наверное, слышали много шума вокруг него о том, как сложно настроить реактивный проект, все шаблоны вместе с ним и т. д.
Тем не менее, редукс сегодня так популярен. Почему?
Потому что это позволяет нам управлять глобальным состоянием в одном приложении, где несколько компонентов могут получить доступ к одному и тому же фрагменту данных в глобальном состоянии.
Поговорим об этапах установки.
Шаг 1. Если вы еще не установили узел, выполните следующую команду, чтобы установить узел в своем терминале:
- curl «https://nodejs.org/dist/latest/node-${ВЕРСИЯ:-$(wget -qO- https://nodejs.org/dist/latest/ | sed -nE's| .*›node-(.*)\.pkg‹/a›.*|\1|p')}.pkg” › “$HOME/Downloads/node-latest.pkg” && sudo installer -store -pkg “ $HOME/Загрузки/node-latest.pkg» -цель /
Шаг 2: установите новый проект реакции с помощью следующей команды, указав redux-project в качестве имени проекта:
- Редукторный проект npx create-реагировать на приложение
Шаг 3. Измените файл index.js и замените его следующим содержимым:
Шаг 4. Чтобы установить Redux, вам необходимо установить несколько пакетов Redux, выполнив следующую команду:
- npm install react-redux redux redux-thunk — — сохранить
Шаг 5. Измените файл app.js и замените его следующим содержимым:
Здесь я импортировал «провайдер» и обернул его вокруг нашего приложения. В данном случае это будет ActionComponent, хотя обычно это будет набор маршрутов, ведущих к разным страницам.
Это означает, что любой компонент, обернутый поставщиком HOC (функция более высокого порядка), будет иметь доступ к глобальному хранилищу избыточности. ConfigureStore — это функция, которая подключает приложение к корневому редюсеру (который соединяет все редьюсеры).
Шаг 6. создайте store.js со следующим содержимым:
Здесь мы вызываем createStore из redux, что дает нам хранилище по умолчанию для работы со всем приложением. Он принимает 3 аргумента: один из них является rootreducer, который содержит все редьюсеры вместе взятые. В этом редукторе хранятся данные вашего глобального хранилища, а также функция, которая анализирует входящие команды, которые изменяют существующее состояние.
Есть еще одна интересная деталь — composeEnhancers.
Если вы не знали, что это такое, и посмотрев на него, вы можете, по крайней мере, догадаться, что это связано с инструментами разработки Redux. Верно!
Инструменты отладки Redux теперь доступны в браузерах после включения composeEnhancers для вызова createStore.
Вот как инструмент разработки redux выглядит в реальном браузере:
Шаг 7. Создайте папку с именем reducers в каталоге src и создайте файл rootReducer.js со следующим содержимым:
В обычном приложении вы можете ожидать, что здесь будут разные редукторы, каждый со своим локальным состоянием и данными.
Здесь мы экспортируем один корневой редюсер с локальным состоянием из простого редуктора.
Шаг 8. В папке редукторов создайте файл с именем simpleReducer.js и включите в него следующее содержимое:
Здесь simpleReducer содержит результат, FruitOne, FruitTwo, все глобальные данные состояния, которые будут изменены и использованы в зависимости от изменений состояния приложения.
Он принимает разные команды, такие как «SET_FRUIT_ONE», и изменяет состояние в зависимости от того, какое значение содержит action.payload.
Откуда берутся все эти команды?
Все они берутся из js-файла действия, который содержит список функций, отправляющих команды редюсеру для изменения состояния.
Шаг 9: в папке src создайте новый каталог с именем action. В папке действий создайте файл с именем simpleActions.js со следующим содержимым:
Здесь мы вызываем функцию отправки с типом и полезной нагрузкой. «Тип» — это команда, которую принимает редуктор и решает, как изменить глобальное состояние. Полезная нагрузка — это данные, которые будут введены в глобальное состояние, в зависимости от того, как редюсер обрабатывает эту часть данных.
Теперь наш редукс настроен!
Вопрос в том, как изменить хранилище избыточности и получить доступ к данным хранилища избыточности в нашем приложении?
Помните, в app.js у нас есть компонент действия, обернутый провайдером?
Шаг 10. Создайте папку компонента в каталоге src. Внутри папки компонента создайте ActionComponent.js и включите следующее содержимое:
Здесь мы получаем функцию подключения от react-redux, которая позволяет нам обернуть actionComponent и подключить его к хранилищу redux.
Компонент Connect, как правило, состоит из двух компонентов:
- mapStateToProps: это позволяет нам получить доступ к глобальным переменным состояния.
- mapDispatchToProps: это дает нам доступ к функциям, которые могут изменять глобальное состояние.
В этом компоненте мы подключаем функции для обновления глобального состояния из mapDispatchToProps. После этого мы получаем к ним доступ как к атрибутам реквизита и вызываем их. Что происходит, так это то, что он вызывает функцию, которая отправляет определенное действие (например, набор фруктов) со своим собственным типом (командой) и полезной нагрузкой. Затем он переходит к редьюсеру и изменяет состояние.
Если вы заглянете в инструменты разработчика Redux в Chrome, вы сможете отслеживать все команды и состояние глобального состояния, как показано на одном из скриншотов выше.
Как насчет получения доступа к переменным из состояния?
Шаг 11: внутри папки компонентов создайте компонент FruitComponent.js со следующим содержимым:
Просто для mapDispatchToProps вы предоставляете поле, которое хотите видеть, от определенного редьюсера, и эта переменная становится доступной в качестве реквизита.
Обратите внимание, что любые изменения в компоненте действия приведут к тому, что mapStateToProps снова получит FruitOne и FruitTwo из глобального состояния. Что ж, это нехорошо, потому что мы хотим получать fruitOne/fruitTwo только при загрузке страницы и только тогда, когда эти две переменные изменяются в глобальном состоянии.
На данный момент этого достаточно, чтобы помочь вам настроить Redux. В следующих статьях я расскажу об инструментах для запоминания данных, которые мы получаем от редукса.