Большинство внешних заданий в мире сегодня и даже ваши личные проекты всегда будут требовать надежного диспетчера состояний для пользовательского интерфейса, потому что по мере масштабирования приложения передача данных, мутация данных и контроль возрастают.
Как вы знаете, решение этой проблемы - Redux или Mobx-State-Tree (MST). Мне нравится функциональное программирование, особенно при написании кода внешнего интерфейса, поэтому я предпочитаю углубленно изучать Redux вместо MST, который больше похож на стиль ООП (объектно-ориентированного программирования). В этой статье я буду упрощать React Redux настолько сложным, насколько кажется, просто оставайтесь спокойными, дочитайте до конца с чашкой кофе и печеньем.
Понятие и терминология
Представьте, что вы посещаете очень большой торговый центр, подобный показанному выше, вы можете купить здесь все, что захотите, - телефоны, еду, одежду и т. Д. Вместо того, чтобы иметь рынок телефонов в месте A, продуктовый рынок в месте B и одежду. рынок в локации C, ура !!! с торговым центром у вас есть все типы рынков в одном месте.
Это работает так же с вашим пользовательским интерфейсом, вместо того, чтобы каждый компонент управлял своим собственным состоянием, как показано ниже.
Теперь у нас есть торговый центр или магазин под названием REDUX STORE, где все состояния (рынок одежды, продуктовый рынок и компонент рынка телефонов) или данные каждого компонента хранятся и могут быть извлечены или обновлены в любое время из любого места, здорово !!! поэтому компонент A (рынок телефонов) теперь находится в магазине или торговом центре, и если мне нужен телефон, я просто еду в торговый центр, не нужно передавать реквизиты компоненту A (рынок телефонов), чтобы получить телефоны, то же самое относится ко всем другим компонентам .
Это делает компоненты вашего приложения свободными от логики, легковесными, поскольку они только потребляют данные и вообще не управляют состоянием, супер динамичными, поскольку им нужно только ехать в торговый центр или магазин redux, чтобы получить все, что им нужно.
РЕДУКТОРЫ
Поскольку теперь у нас есть большой торговый центр или магазин redux, нам по-прежнему нужны продавцы для обслуживания каждого сегмента торгового центра. В Redux этих продавцов, обрабатывающих каждый сегмент торгового центра или магазина, называют РЕДУКТОРАМИ, они принимают ваш запрос и дают вам ответ, например
Я: мне нужен iPhone 5
Продавец: Привет, я Джон, я занимаюсь iPhone, какой цвет вам нужен, сэр?
ДЕЙСТВИЕ
Собираясь в торговый центр, я сделаю запрос на предмет, который мне нужен, устно или письменно. В Redux запрос, который вы делаете, содержащий ваш заголовок или тип и краткое описание, называется полезной нагрузкой ACTION или ACTION (которая представляет собой простой объект javascript)
ОТПРАВЛЯТЬ
Dispatchers или Dispatch - это просто способ (метод или функция), которым мы отправляем наше действие или полезную нагрузку в хранилище. И как только они прибывают в хранилище, Reducer, который обрабатывает тип действия GET_PHONE, теперь продолжает процесс транзакции получения телефона из хранить
СОЕДИНЯТЬ
CONNECT - еще один простой термин для понимания, для покупателя (компонента, которому нужны данные), чтобы получить товар в торговом центре, я должен ехать на машине до торгового центра. Поездка на машине или в торговый центр называется CONNECT в React-Redux. это просто способ получить информацию из магазина или отправить действия или полезную нагрузку в магазин. так что с помощью CONNECT я могу получить что-то из магазина, а также отправить действие.
СОЗДАЕМ НАШЕ ПРИЛОЖЕНИЕ ДЛЯ ПРОДАЖ ОБУВИ REACT REDUX
Для этого приложения мы будем работать с приложением React, поэтому откройте свой cmd и создайте его.
npx create-react-app shoesshop
подробнее здесь: React app
если вы это сделали, установите следующие зависимости
npm install redux react-redux redux-thunk redux-devtools-extension или yarn add redux react-redux redux-thunk redux-devtools-extension
Внутри папки src создайте следующую папку:
- Папка компонентов: в этой папке находятся все наши компоненты. создать AddShoes.jsx, ViewShoes.jsx, EditShoes.jsx
- Папка контейнера: в этой папке находятся все наши контейнеры. создайте Ad.jsx, ViewShoesCont.js, EditShoesCont.js.
КОНТЕЙНЕРЫ. Представьте на секунду беременную женщину, которая сама ест, гуляет и принимает лекарства, а ребенок просто проверяет показатели ее жизненно важных функций. В React контейнеры Redux (беременные матери) представляют собой оболочки для компонентов, они взаимодействуют с хранилищем, получают все данные и даже отправляют действия, а затем визуализируют и передают результат в качестве свойств компонента. Эта передовая практика помогает сохранить ваш компонент легким и свободным от логики.
3. Папка действий: в этой папке находятся все наши действия или создатели действий.
СОЗДАТЕЛИ ДЕЙСТВИЙ. Создатели действий представляют собой простые функции JavaScript, возвращающие действие.
4. Папка reducer: в этой папке находятся все наши редукторы redux.
РЕДУКТОРЫ (техническое определение): являются функциями Javascript, которые принимают ПРЕДЫДУЩЕЕ состояние приложения, а также ДЕЙСТВИЕ и возвращают новое или следующее состояние. Следовательно, они являются чистыми функциями.
5. Папка страниц: в этой папке находятся все наши страницы. создайте внутри файл Home.jsx, Sales.jsx, dashboard.jsx.
ИНТЕГРАЦИЯ REDUX ДЛЯ РЕАКТИРОВАНИЯ ПРИЛОЖЕНИЯ
В папке Reducer добавьте файлы rootReducer.js и shoeReducer.js.
Создаваемому нами приложению нужен только один редуктор (продавец в нашем торговом центре), он (shoeReducer) обрабатывает все транзакции, связанные с обувью.
Поэтому, если вы создаете приложение, в котором есть несколько концепций, вам понадобится больше редукторов для обработки каждой из них. Я надеюсь создать такое приложение в моей следующей статье об обработке операций Async / Sync в React-Redux.
в rootReducer.js добавьте приведенный ниже код
сначала мы импортировали наш shoeReducer, а затем импортируем combReducer из redux. с combReducers мы можем объединить все наши редукторы приложений. он принимает объект (пары ключ-значение), поэтому в торговом центре (магазин redux) наш shoeReducers идентифицируется с shoesStore, как показано выше.
в shoeReducer.js добавьте приведенный ниже код
Помните, что редукторы в redux - это чистые функции javascript. Его первый параметр - это состояние, а второй - объект действия.
в redux состояние должно быть неизменным, поэтому вы никогда не выполняете state.name, state [0] .user.country, вы только возвращаете новое или следующее состояние, используя такие методы, как filter, map, синтаксис распространения (…) и т. д., который не изменяет исходный массив, а возвращает новый.
в корневом каталоге в index.js импортируйте следующие модули
redux: мы импортируем createStore, который позволяет нам фактически создавать магазин, поэтому рассматривайте его как инженера-строителя в redux. applyMiddleware - это оболочка, которая позволяет нам выполнять вызовы API с помощью redux
rootReducer: мы импортируем наш файл rootReducer.js, который мы создали выше.
thunk: thunk помогает нам в вызове API, это просто промежуточное ПО, которое делает это возможным.
provider: поставщик, как и в React Context API, делает доступными данные в нашем магазине для каждого компонента в приложении.
composewithdevtools: это помогает нам визуализировать наше хранилище redux в браузере, используя ее расширение для браузера.
Теперь мы используем наши импортированные функции для фактического создания хранилища и обертывания нашего корневого компонента (App.js) с помощью Provider.
добавьте следующие коды:
Затем хранилище переменных назначается createStore, принимая сначала наш rootReducer и composewithdevtools, оборачивая наше промежуточное ПО thunk.
ВЫВОД
Это не конец учебника, а только начало, Redux - это всегда большая тема, которую нужно подробно осветить с нуля в одной статье. В моей следующей статье «Визуализация магазина React-Redux в браузере» я завершу работу над этим приложением, а также покажу вам, как визуализировать магазин в вашем браузере.
Репо статьи: https://github.com/armstrong99/Simplifying-React-Redux
Большое спасибо за чтение.
