Промежуточное ПО для асинхронного потока в Redux

Что мы должны использовать: Thunk, Promises или Sagas?

Правильное управление состоянием жизненно важно для любого приложения React. И все же Redux доминирует в этом пространстве.

Однако, если вы используете только Redux, вы почувствуете пробел при использовании его для асинхронных операций.

И здесь в игру вступает промежуточное ПО Redux. В этой статье я подробно рассмотрю эти варианты промежуточного программного обеспечения, чтобы понять их возможности.

Асинхронные операции в Redux

Как вы все знаете, изменения состояния в хранилище Redux выполняются путем запуска действий, предоставляемых хранилищем.

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

Поэтому, как упоминалось выше,

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

Роль промежуточного программного обеспечения в Redux

Применение любого промежуточного программного обеспечения к Redux выполняется путем улучшения функции createStore() функцией applyMiddleware() от Redux. Промежуточное ПО должно быть передано в эту функцию. Обычно функция dispatch() хранилища Redux позволяет только отправлять объект, что называется действием.

Однако когда применяется промежуточное ПО, оно обертывает dispatch() функцию магазина, позволяя отправлять функции или обещания вместо действий.

По промежуточного слоя перехватывает отправку, разрешая асинхронный поток данных и, наконец, отправляя действие. Последняя отправка действия восстанавливает синхронный поток данных.

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

Промежуточное ПО Thunk.
Промежуточное ПО Saga.
Промежуточное ПО на основе обещаний.
Async / Await (с помощью промежуточного программного обеспечения Thunk).

Давайте посмотрим на каждую из их возможностей.

Промежуточное ПО Thunk

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

Redux Thunk делает следующее.

Позволяет писать создателей действий, которые возвращают функцию вместо действия.
Позволяет отложить отправку акции.
Позволяет отправить действие, если выполняется определенное условие.
Передает dispatch() и getState() в качестве параметров функции, возвращаемой создателем действия (внутренняя функция).

После внедрения Redux Thunk создатель действия называется Thunk.

Плюсы

Подходит для простых приложений.
Включает асинхронные операции без большого количества шаблонного кода.
Легко настроить и внедрить - меньше времени на обучение.

Минусы

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

Промежуточное ПО Saga

Redux Saga использует функцию ES6 под названием «Генераторы» для включения асинхронных операций.

Генераторы упрощают чтение, запись и тестирование асинхронных потоков.

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

Плюсы

Позволяет выражать сложную логику как чистые функции (саги).
Легко тестировать, потому что чистые функции предсказуемы, повторяемы, а эффекты декларативны.
Может действовать в ответ на действия - сага подписывается на хранилище и позволяет запускать саги, когда действие отправлено для продолжения или выполнения.
Возможность использовать takeLatest, что позволит использовать последний триггер (или противоположное поведение с использованием _8 _) - помогает избежать проблем с параллелизмом.
Разъединяет эффекты - например, когда мы нажимаем кнопку 1, если кнопка 2 должна измениться, кнопка 1 отправляет только то, что она была нажата. Затем сага, прослушивающая нажатие этой кнопки, обновит кнопку 2, отправив новое событие, о котором знает кнопка 2.
Позволяет разделить проблемы.
Запускаются только события (а не действия) - это упрощает обработку пользовательского интерфейса, поскольку уровень трансляции между тем, что произошло, и тем, что должно произойти в результате эффекта, не нужно поддерживать.
Саги можно путешествовать во времени, что позволяет вести сложный журнал потоков.
Имеет встроенные способы обработки сложных задач, таких как регулирование, устранение неполадок, условия гонки и отмена.
Упрощает масштабирование сложных приложений с побочными эффектами.
Легче выявлять ошибки и обрабатывать сбои (с помощью блоков try catch).
Хорошо задокументированы.

Минусы

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

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

Промежуточное ПО на основе обещаний

Промежуточное ПО обещания возвращает обещание вызывающему, чтобы дождаться завершения асинхронной операции. Это полезно для рендеринга на стороне сервера. Есть несколько пакетов, которые можно использовать в качестве промежуточного программного обеспечения на основе обещаний (например, - redux-promise-middleware).

Плюсы

Легко понять - меньше времени на обучение.
Умение использовать обещания.
Включает оптимистичные обновления.
Меньше шаблонного кода, чем в Sagas.

Минусы

Работает только для тривиальных случаев - плохо масштабируется.
Невозможно связать операции вместе.
Невозможно отменить обещание - в отличие от Саг.
Не отправляет объекты простого действия - труднее проверить.

Промежуточное ПО можно комбинировать с Thunk, если требуется объединение асинхронных операций.

Async / Await также построен на основе обещаний, где асинхронный код больше похож на синхронный код. Нам не требуется никакого специального промежуточного программного обеспечения для использования async / await для асинхронных операций.

Однако, как и в случае с другим промежуточным программным обеспечением, основанным на обещаниях, для этого также требуется помощь Thunk для цепочки асинхронных операций.

Создавайте приложения иначе

Инструменты OSS, такие как Bit, предлагают новую парадигму для создания современных приложений.

Вместо того, чтобы разрабатывать монолитные проекты, вы сначала создаете независимые компоненты. Затем вы собираете свои компоненты вместе, чтобы создать столько приложений, сколько захотите. Это не только более быстрый способ сборки, но и более масштабируемый, он помогает стандартизировать разработку.

Это весело, попробуй →

Заключение

Все промежуточное ПО, которое мы обсуждали в этой статье, чрезвычайно популярны и подходят для разных сценариев использования. Если вы новичок в Redux, я предлагаю сначала попробовать Redux Thunk, так как его легко понять и реализовать. Когда вы освоите Thunks, переход к промежуточному программному обеспечению на основе обещаний и Sagas имеет больше смысла.

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

Кроме того, существуют более новые решения, такие как Redux Observables для обработки асинхронных операций. Это построено вокруг наблюдаемых и реактивного паттерна. Если вам интересен этот паттерн, дополнительную информацию можно найти здесь.

Дайте мне знать, что вы думаете о промежуточном программном обеспечении, обсуждаемом в этой статье. Спасибо за прочтение!