Redux — это просто библиотека управления состоянием для приложений JavaScript, не более того! Но его шаблоны немного сложны. Однако, если вы понимаете концепцию функционального программирования, то сможете легко понять Redux.
Я предполагаю, что у вас есть представление о функциональном программировании. Я разработчик React и использовал хук useState() для хранения данных внутри компонентов. Но когда мне нужно было поделиться данными моего компонента, я обычно применял подход «детализация реквизита». Проблема заключалась в том, что когда мое приложение масштабировалось, я столкнулся со многими проблемами при управлении состоянием. Итак, я протестировал вкус Redux и мне очень понравилось.
Redux — это просто инструмент, который централизует данные вашего приложения внутри магазина, а Redux предоставляет вам некоторые функциональные методы для управления магазином.
По сути, Redux предоставит вам только две вещи:
Магазин
B. Парадигма управления магазином
А. Магазин
Это просто файл JavaScript с именем store, и вы можете поместить в него все данные вашего приложения.
Поскольку я разработчик React, я использовал Redux в React. Итак, мне нужно импортировать функциональность Redux. Я импортировал две вещи,
1. создать магазин
2. комбинированный редуктор
createStore поможет мне создать магазин для моего приложения.
combineReducer поможет мне объединить все данные моего приложения в один объект.
Не беспокойтесь о том, что такое Редьюсер.
Теперь вы знаете, что такое магазин в Redux. И это все о магазине.
Б. Парадигма управления магазином
Пункт B может быть немного сложным для вас, но не волнуйтесь! Я сделаю все возможное.
Парадигма управления хранилищем — это означает, что Redux даст вам некоторые шаблоны для вставки/удаления/обновления/чтения данных из хранилища.
Redux дает вам 3 вещи для управления магазином:
- Действие
- Редуктор
- Отправлять
1. Действие
Действие может быть вашим файлом JavaScript, в котором вы можете определить, какие действия вы хотите выполнять для управления своим магазином.
Вы можете быть сбиты с толку приведенным выше кодом действия — это просто функциональное программирование, ничего больше. Функция просто возвращает объект, и внутри этого объекта у нас есть только два свойства: type и payload.
Мы объявили, какое действие мы хотим выполнить для нашего магазина. Теперь пришло время для Редьюсера.
2. Редуктор
Редьюсер — это просто часть данных вашего магазина, не больше и не меньше.
Slice — это набор логики и действий редуктора Redux для одной функции в вашем приложении
Предположим, у нас есть 2 типа транспортных средств: один — автомобиль, а второй — автобус. Иоба автомобиля имеют разные свойства, и мы хотим сохранить данные обоих автомобилей в нашем магазине. Для этого нам нужно сделать два редьюсера (слайса данных) для управления магазином.
Мы сделали наш первый редьюсер или фрагмент данных для нашего магазина. Я определил только одно действие в этом редюсере, но мы можем написать столько, сколько захотим. Но лучше всего писать связанные действия внутри редьюсера.
Этот редьюсер просто управляет потоком данных, то есть тем, как данные будут передаваться и как данные будут сохраняться внутри нашего хранилища. По сути, редуктор содержит логику изменения данных. Это все для редуктора.
3. Отправка
Это не что иное, как метод, который будет выполнять только наше действие, а редюсер прочитает его и внесет изменения в наш магазин.
Как вы можете видеть выше, мы импортировали наше действие Redux в компонент React и отправили его, передав наше действие. Вы должны передать свой магазин для доступа к хранилищу Redux, как я сделал в файле index.js ниже; в противном случае хук useSelector не будет работать.
Итак, Action, Reducer и Dispatch — эти трое управляли нашим магазином, и это «парадигма управления магазином Redux».
Наконец, эта статья была посвящена Redux. В Redux есть много интересного, но новичкам этого достаточно для начала. Если у вас есть какие-либо вопросы, связанные с Redux, я буду рад ответить на них.
Пожалуйста, прочитайте официальные документы Redux для лучшего понимания.
Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку здесь.
