Автор оригинала: FreeCodeCamp Community Member.
Сэм Олласон
Эта статья пройдет через обзор высокого уровня Redux-logic Отказ Мы посмотрим на то, что это, почему нужно, как он отличается от других промежуточных программ Redux и почему я думаю, что это лучший выбор. Затем мы увидим пример простого Погода приложение Чтобы продемонстрировать, как основные концепции применяются на практике.
Эта статья предполагает, что у вас хорошее понимание реагирования и Redux.
Быстрая освежание на redux
Redux – это контейнер состояния для приложений JavaScript и обычно используется с реакцией. Он предоставляет центральное место для хранения данных, которые используются в вашем приложении. Redux также предоставляет рамки для создания предсказуемый Государственные мутации. Использование Redux облегчает запись, понимание, отладку и масштабирование данных, управляемых данными и динамическими приложениями.
В Redux компоненты звоните Творцы действий Какая отправка Действия Отказ Действия (обычно!) Небольшие простой объекты, которые выражают намерение или инструкцию. Действия также могут содержать «данные полезных нагрузок» (I.E. Data).
Состояние приложения управляется Редукторы Отказ Они звучат сложнее, чем они! Действия обрабатываются корневым редуктором, который затем передает действие и полезную нагрузку для конкретного редуктора. Этот редуктор будет Примите копию состояния приложения, Мутате Скопировать (Согласно действию и его полезной нагрузке), а затем обновите состояние в приложении Магазин Отказ
Почему нужна логика redux?
По умолчанию все действия в redux отправляются синхронно. Это представляет проблему для любого приложения, которая должна поддерживать асинхронное поведение, такое как получение данных из API … Так что в значительной степени любое приложение!
Чтобы обрабатывать асинхронное поведение с использованием Redux, нам нужен какой-то промежуточное программное обеспечение Это делает некоторую обработку между при рассмотрении действия, и когда действие достигает редукторов. Есть несколько популярных библиотек для предоставления этой функциональности.
После изучения различных вариантов я использовал Redux-логику в различных проектах на некоторое время и нашел его здорово!
Redux-Logic Lifecycle
Redux-Logic обеспечивает промежуточное программное обеспечение, которая выполняет некоторую обработку между тем, когда действие отправляется от компонента, и когда действие достигает редуктора.
Мы используем Redux-logic Библиотека для создания «логики». Это по существу функции, которые перехватывают конкретные простой объект Действия, выполняйте асинхронную обработку, а затем отправьте другую Простое обвидьте т действия. Логические функции действительно являются декларативными и гибкими, как мы увидим!
Важным, что нужно убрать вот, что все действия, которые Redux-Logic работает с Простые предметы Отказ Действие, которое отправляется компонентом пользовательского интерфейса и действием, которое затем отправляется логикой, будет всегда быть простой объектом (в отличие от, например, функцией). Мы будем вернуться к этому ниже, когда мы сравним разные параметры промежуточного программного обеспечения.
Под капотом Redux-логика использует «наблюдаемые» и реактивное программирование. Узнайте больше о том здесь Отказ
Поток данных
Ниже, для сравнения, является диаграммой, которую я создал, показываю важные моменты в жизненном цикле синхронного процесса redux. Нет промежуточного программного обеспечения (потому что никто не требуется!).
Теперь здесь диаграмма, показывающая важные части проекта, которые используют библиотеку Redux-Logic для обработки асинхронных действий. Это будет полезно ссылаться на потом вместе с примером ниже.
Вы можете посмотреть, как промежуточное программное обеспечение работает между при отправке действий и когда он обрабатывается редуктором.
Основные различия от других решений
Redux-Thunk Популярный выбор для промежуточного программного обеспечения Redux, который также позволяет поддерживать асинхронное поведение. Чтобы обрабатывать асинхронное поведение, используя Redux-Thunk ваши действия, создатели должны Обратные функции в отличие от возвращения обычных объектов с помощью Redux-Logic. Я считаю, что диспетчеризация простых объектов с Redux-Logic делает ваш код намного проще написать и гораздо проще понять.
Кроме того, я считаю, что подход «простого объекта» для обработки асинхронного поведения вписывается более естественным образом наряду с остальной частью (синхронной) архитектуры Redux, что делает это промежуточное программирование более организуенно с Redux.
Еще одним популярным промежуточным программным обеспечением Redux является Redux-Saga Отказ Я нашел кривую обучения, чтобы получить голову вокруг сага (относительно новая функция ES6) довольно крутая, когда я смотрел на этот вариант. Это было бы усугублено, если вы хотите представить эту библиотеку в приложение, управляемое командой с несколькими людьми. Кроме того, я думаю, что если они не хорошо управляются, то SAGAS может создать сложный код по сравнению с логикой, который вы создаете с помощью Redux-Logic. Это может повлиять на скорость развития и ремонтопригодность кода.
Обзор примера
Ниже приведены простые фрагменты из простого приложения Ract React, которые могут извлечь текущие погодные условия в городе и представить его пользователю. Пример использует Redux-логику для поддержки асинхронного поведения для получения данных с использованием бесплатного OpenWeathermap API.
Для сравнения я включил процесс синхронного Redux, который отображает количество запросов, которые сделали пользователь.
Здесь это исходный код.
Настройка среды разработки
Это команды, которые я работал, чтобы начать создавать мое приложение:
npx create-react-app appnpm install --save reduxnpm install --save react-reduxnpm install --save redux-logicnpm install --save axios
И увидеть приложение:
npm start
Рад, что я мог видеть домашнюю страницу создания по умолчанию на localhost: 3000 Затем я начал писать какой-то код!
Ниже приведены фрагменты кода, которые показывают важные моменты о интеграции Redux-логики в проект.
Добавление промежуточного программного обеспечения на наш магазин redux
В appstore.js Если мы не использовали промежуточное программное обеспечение, мы обычно предоставляем только наш корневой редуктор в метод Createstore. Здесь мы связываем наше промежуточное программное обеспечение Redux-Logic для остальной части нашего приложения.
Мы указываем, что мы хотим использовать Axios Как наш клиент для создания HTTP-запросов.
Затем мы используем метод Redux-Logic для создания нашего промежуточного программного обеспечения и, наконец, мы добавляем его в качестве параметра в метод CreateStore. Это означает, что наш код Redux сможет получить доступ к нашему промежуточному программе. Большой!
Отправляя асинхронные действия
С Redux-Logic, действия, которые вызывают асинхронное поведение, отправляются так же, как действия, которые вызывают синхронные обновления состояний. Нет ничего другого!
Для полноты, вы можете увидеть ниже, что когда пользователь нажимает на кнопку, мы называем создатель действий, который был передан нашему компоненту в качестве реквизита.
Перехватывание асинхронных действий
Именно здесь мы видим появление промежуточного программного обеспечения Redux-логики. Мы используем библиотеку Redux-Logic, чтобы создать некоторую «логику», которая перехватит указанные действия.
В наших логических свойствах мы говорим Redux-Logic, какую действие мы хотим перехватить. Мы указываем, что мы хотим Redux-Logic предоставить только данные из последнего действия этого типа, который компонент отправлен. В нашем примере это декларативное поведение полезно, если люди продолжают нажать на кнопку, поскольку они получит значение из последних действий, которые они отправили, не обязательно последнее обещание вернуть!
Далее мы указываем, что когда асинхронный процесс возвращает мы немедленно Отправка один из двух действий. Если обещание успешно вернулось, мы возвращаем Get_weather_for_city_successful действие. Это то, что мы хотим!
В качестве альтернативы, если вернуемое обещание было отклонено, тогда мы отправляем Get_weather_for_city_failure Отказ
Это где redux-logic действительно сияет Отказ Ясно, каково намерение логического кода, а что излучаются, являются простыми объектами, которые легко читать и интерпретировать! Я нахожу это действительно легко читать, понимать и отлаживать.
Внизу мы проясним то, что мы хотим, чтобы наш асинхронный процесс сделать. Мы хотим вернуть ценность обещания. Обратите внимание, как мы проходим в полезной нагрузке, которая пришла с нашими действиями в URL.
Обработка асинхронных действий
Вы можете увидеть из WeatherDatahandling.js Редуктор, что действия, отправленные из нашей логики, затем рассматриваются как простые действия объекта. Редукторы мутата государства в так же, как с синхронными действиями Отказ Таким образом, скриншот ниже – то, что вы ожидаете от работы с Redux раньше. Супер!
Резюме
Redux – популярный предсказуемый государственный контейнер для приложений JavaScript. По умолчанию все действия redux поддерживают только синхронное поведение, и вам понадобится какое-то решение для промежуточного программного обеспечения для асинхронного поведения.
Redux-Logic предоставляет ясно и Мощный Промежуточное программное обеспечение, которое позволяет использовать асинхронные действия в вашем приложении Redux. Вы добавляете свое промежуточное программное обеспечение на ваш redux Магазин Чтобы позволить вашему приложению использовать Redux-логику. Вы используете Redux-logic Библиотека для создания Логика которые перехватывает определенные действия и отправляют дальнейшие действия после некоторой асинхронной обработки (например, получение данных из API).
Все вовлеченные действия – это простой объект Действия. Я верю, что это делает это легче писать и легче понять по сравнению с другими решениями. Кроме того, Redux-Logic чувствует себя как более органическая подходит с другими частями архитектуры Redux.
Спасибо за чтение, я приветствую любые комментарии или вопросы ниже!