Если вы знакомы с React JS и разрабатывали какое-либо приложение, вы должны знать, насколько сложно передавать данные между компонентами. Хотя каждый компонент или контейнер может управлять своими состояниями, даже компоненты без состояния (функциональные компоненты) теперь имеют свои состояния с введением перехватчиков. Каким бы ни был вариант использования и какой бы ни был сценарий, одно можно сказать наверняка: никакие компоненты в React не взаимодействуют друг с другом, если только у них нет отношений родитель-потомок или если вы не выполняете хак с поднятием состояния с помощью props или, возможно, использовать localStorage и другие старые способы.

Для решения вышеупомянутых проблем есть один мощный способ с крутой кривой обучения. Решение — Redux.

Что такое Редукс?

Redux — это библиотека javascript с открытым исходным кодом, которая используется для эффективного управления состоянием приложения. Он используется для создания согласованного состояния для всего приложения. При этом каждый отдельный компонент получает доступ к единому контейнеру, что позволяет вашему приложению реализовать единый источник достоверности, что делает ваши компоненты управляемыми. Ниже приведена базовая блок-схема, объясняющая работу Redux.

Начало работы с Redux

  • Шаг 1 (установка пакетов). Чтобы начать использовать Redux с React, вам нужно установить два пакета redux и react-redux. Вы можете запустить следующую команду в своей оболочке.
npm install --save react-redux redux
  • Шаг 2 (написание первого редуктора):первой частью кода будет редьюсер. Редуктор — это чистая функция, которая отвечает исключительно за обновление состояния. Вы не можете изменять состояние и можете обновлять его только с помощью этой функции. Вы также должны предоставить начальное состояние редюсеру. Например.

Здесь todoReducer — это функция, которая принимает два параметра: первый — это копия состояния, а другой — действие (не волнуйтесь, оно будет объяснено позже), которое вы хотите запустить. Наш редюсер может обрабатывать два типа действий: ADD_TASK и DELETE_TASK. Обратите внимание, что я возвращаю новый объект после его обновления, вы также должны позаботиться о неизменном состоянии, и если вы попытаетесь обновить его, вы в конечном итоге будете ломать голову весь день, если не исправите себя.

  • Шаг 3 (Создание хранилища):До сих пор мы не использовали библиотеку redux или react, поэтому давайте воспользуемся нашей первой библиотекой и импортируем функцию createStore из библиотеки redux. Функция createStore принимает редукторы в качестве входного параметра. (Обратите внимание, что для простоты мы используем здесь только один редуктор. Однако у вас может быть более одного редьюсера в соответствии с вашими потребностями)

Здесь Store создается с помощью функции createStore и начального состояния, упомянутого в редюсере. Теперь это можно использовать в любой части вашего приложения в качестве единого источника данных, и вы можете обновить его с помощью редьюсера, который вы передали.

  • Шаг 4 (сделайте свой магазин доступным для всех компонентов): чтобы использовать глобальное состояние (хранилище) внутри вашего компонента, вы должны обернуть самый внешний контейнер/компонент компонентом, доступным в библиотеке react-redux >Поставщик, в котором вы должны передать магазин в качестве реквизита. Вот фрагмент кода:
  • Шаг 5 (подключение вашего компонента к хранилищу): теперь все в порядке, мы можем подключить наши компоненты для получения и внесения обновлений. Мы делаем это с помощью другой функции, предоставляемой react-redux, которая называется подключить. функция connect (параметров больше, узнавайте по мере необходимости) обычно принимает на вход две функции.
  1. mapStateToProps: эта функция получает копию state (хранилища) и просто сопоставляет или предоставляет их свойствам компонента. В нашем примере это функция:

2. mapDispatchToProps: эта функция используется для сопоставления функций диспетчеризации действий с реквизитами. Эта функция получает параметр dispatch. диспетчеризация сама по себе является функцией, которую можно использовать для запуска действия.

Действие: действие — это простой объект, который обычно содержит два ключа, а именно тип, который указывает тип действия (используется редюсером для выполнения требуемого блока) и полезную нагрузку. который содержит данные, по которым мы хотим обновить магазин.

Вот фрагмент mapStateToProps:

Вместе эти две функции делают состояние (хранилище) доступным для всех компонентов. Вот как вы соединяете все части и делаете свой компонент подписанным на глобальное состояние редукции.

Я надеюсь, что у вас есть все концепции и код, и вот код для полного приложения.

https://github.com/assembler123/redux

Спасибо!!