Что такое Redux?

Redux - это библиотека управления состоянием, которая позволяет пользователям сохранять состояние всего приложения в едином неизменяемом дереве. Если вы достаточно долго работали с React, то знаете, что есть некоторая боль при обработке состояний при масштабировании вашего приложения. Перемещение одного состояния от одного компонента к другому и его дальнейшая детализация вызывает много разочарования и раздражения и, откровенно говоря, не очень хорошее решение в обращении с этим… Redux может все это решить.

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

Концепции Redux

Разочарование, связанное с изучением Redux, заключается в том, что с него очень сложно начать. Слишком много компонентов, которые вам нужно настроить, прежде чем вы сможете его использовать. Я здесь, чтобы сказать вам, это просто. Чтобы понять Redux, нам нужно полностью понять его фундаментальные идеи. Мне нравится думать о Redux как об инструменте, который состоит из трех основных идей: хранилище, действия и редукторы.

Магазин

Думайте о магазине как о доме для всего состояния вашего приложения. Это простой объект JavaScript, содержащий пары ключ-значение для любого состояния, которое вы хотите сохранить.

Действия

Действия - это простые объекты JavaScript, описывающие тип взаимодействия, которое вы хотели бы видеть. Например, SET_INCREMENT может быть типом действия, которое увеличивает значение счетчика. Или FETCH_USER_DATA может быть другой тип действия. Опять же, это объект JavaScript, который описывает, что вы хотите сделать.

OR

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

Редукторы

Наконец, редуктор. Редуктор - это функция, которая существенно упрощает, какое действие вы хотите видеть, и как изменить состояние в зависимости от типа действия. Думайте об этом как о связке операторов if-else, в зависимости от того, какое действие запускается, и в зависимости от этого изменяется состояние.

Приступим к примеру

Лучше всего учиться на примерах, поэтому давайте создадим небольшой пример приложения, использующего Redux.

Приложение, которое мы собираемся создать, представляет собой счетчик чисел, который отображает число и две кнопки, которые мы можем нажимать для увеличения или уменьшения. Первое, что нужно сделать в этом сценарии, - это создать хранилище Redux.

Здесь много чего происходит, так что давайте распакуем. Мы импортируем функцию createStore из библиотеки redux. Функция createStore принимает редуктор (о том, как создать редуктор, мы поговорим позже). Provider - это компонент более высокого порядка (HOC), который предоставляет response-redux, который обертывает наше хранилище Redux. Провайдер позволяет нам получать доступ к состоянию внутри хранилища из любого места внутри нашего приложения, потому что он является корневым компонентом. Есть еще кое-что, что нам нужно будет сделать, чтобы получить к нему доступ, но мы еще вернемся к этому.

Следующим шагом будет создание действий. Два действия, которые мы собираемся создать, - это SET_INCREMENT и SET_DECREMENT.

Как упоминалось в предыдущих разделах, действия - это простой объект JavaScript, имеющий тип и полезную нагрузку (нам не нужны полезные данные в этом примере, потому что мы не передаем никаких данных). Кроме того, вы видите, что я создаю файл constants.js, в котором хранятся все наши переменные типа. Это сделано для того, чтобы мы не ошиблись в написании названий типов.

Теперь мы создаем наш редуктор. Опять же, редуктор действует как механизм переключения, чтобы облегчить запускаемое действие.

Первое, что нужно сделать при создании редуктора, - это установить начальное состояние. Начальное состояние похоже на то, как вы устанавливаете состояние в React, это просто то, как ваше состояние выглядит в начале. Когда действие запускается или отправляется, оно вызывает функцию редуктора и передает текущее состояние и объект действия. Итак, чтобы облегчить, какой тип что делать, лучше всего использовать оператор switch, но вы также можете легко сделать это с помощью операторов if-else. В нашем случае у нас есть типы SET_INCREMENT и SET_DECREMENT, которые увеличивают состояние нашего счетчика. В каждом случае переключения мы просто возвращаем состояния, которые были настроены, как показано вSET_INCREMENT и SET_DECREMENT.

С момента выпуска перехватчиков React реализация Redux значительно упростилась. Чтобы начать использовать состояния и вызывать наши действия, все, что нам нужно сделать, это написать пару строк кода, и мы находимся на пути к доступу к нему. Для этого мы используем хуки useSelector и useDispatch, предоставляемые response-redux.

Чтобы получить доступ к состоянию счетчика, все, что нам нужно сделать, это использовать ловушку useSelector. useSelector - это ловушка, которая принимает функцию, и мы можем указать, какое состояние мы хотим вернуть обратно. Мы, конечно, можем просто заставить его вернуть все, что есть в нашем магазине, но в этом случае нам нужно только состояние счетчика, поэтому мы указываем его как state.counter. Чтобы вызвать наши действия, мы должны использовать ловушку useDispatch. useDispatch вернется к функции отправки, которую мы можем использовать для вызова наших действий, как показано ниже dispatch(setIncrement()).

Бам! Вот и все, теперь ваше приложение работает на Redux!

Но ждать…?

Что, если нам нужно выполнить действие асинхронно? Как получение данных из API. Для этого нам нужно добавить еще один элемент в наш магазин Redux. Нам нужно добавить промежуточное ПО под названием Redux Thunk.

Redux Thunk

Redux работает синхронно, поэтому каждое действие запускается в определенной последовательности. Если вы хотите выполнить асинхронную задачу, такую ​​как выборка данных из API, вам потребуется дополнительная библиотека под названием Redux Thunk. Библиотека позволяет обрабатывать асинхронный код, проверяя, возвращает ли ваше действие функцию. Это очень важно отметить, поскольку я описывал ранее, что действие - это просто объект JavaScript. При применении промежуточного программного обеспечения Redux Thunk каждый раз, когда действие запускается, оно сначала проходит redux-thunk и проверяет, возвращает ли действие объект или функцию. Если действие возвращает функцию, оно вставит аргумент отправки в вашу функцию, который вы можете использовать для отправки, чтобы вернуть, какой тип действия вы хотите, чтобы оно произошло. .

Единственное, что отличается от того, как мы реализовали магазин раньше, - это то, что мы импортировали два новых компонента, thunk и applyMiddleware.

Давайте быстро рассмотрим, как мы получаем случайную цитату из API. Единственное серьезное изменение - это то, как мы выполняем наши действия. Как объяснялось выше, теперь наше действие должно возвращать функцию вместо объекта, чтобы theredux-thunk перехватил его.

Здесь задействовано множество компонентов, давайте разберем каждый из них. Итак, повторим еще раз, когда мы пытаемся выполнить асинхронное действие, такое как выборка данных из API, действие должно возвращать функцию. Таким образом redux-thunk промежуточное ПО сможет перехватить и распознать, что это асинхронный процесс. Возвращая функцию, redux-thunk дает вам метод диспетчеризации, который позволит вам обрабатывать определенный тип действия, установленный в вашем редукторе. Вам может быть интересно, почему существует так много диспетчеров и типов действий. Использование этих трех типов при вызове API - это в значительной степени соглашение. Тип _REQUEST используется для установки состояния загрузчика в значение true. Тип _SUCCESS используется для обновления состояния на основе данных, полученных от API. Тип _FAIL используется, чтобы указать, что при вызове произошла ошибка.

То, как мы собираем данные и отправляем наши действия, по сути такое же, как и тогда, когда мы не использовали redux-thunk. В этом фрагменте кода я просто захватываю все необходимые состояния с помощью useSelector. И у меня есть метод отправки, который используется для запуска моего вызова действия fetchQuote.

Конец

Redux - замечательный инструмент, который стоит включить в ваш репертуар. Это значительно упрощает процесс управления состоянием вашего приложения, особенно с добавлением хуков. Redux позволяет вам в любой момент полностью взглянуть на состояние вашего приложения и точно знать, что происходит. Есть также много отличных инструментов, которые вы можете использовать вместе с Redux, чтобы упростить управление состоянием вашего приложения. Одно из них - Расширение Redux DevTools для Chrome. Этот инструмент позволяет вам визуализировать состояние вашего приложения в режиме реального времени, а также вернуться во времени, если это необходимо для отладки любых проблем, которые могут у вас возникнуть.

Спасибо, что нашли время прочитать это. Пожалуйста, дай мне знать, если возникнут какие-либо вопросы. 🎯