Сегодня я буду обсуждать, как настроить редукцию в реактивном проекте.

Да, вы, наверное, слышали много шума вокруг него о том, как сложно настроить реактивный проект, все шаблоны вместе с ним и т. д.

Тем не менее, редукс сегодня так популярен. Почему?

Потому что это позволяет нам управлять глобальным состоянием в одном приложении, где несколько компонентов могут получить доступ к одному и тому же фрагменту данных в глобальном состоянии.

Поговорим об этапах установки.

Шаг 1. Если вы еще не установили узел, выполните следующую команду, чтобы установить узел в своем терминале:

Шаг 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. В следующих статьях я расскажу об инструментах для запоминания данных, которые мы получаем от редукса.