Рефакторинг с Redux Thunk на Redux-Saga

Улучшение масштабируемости приложения JavaScript

Многие из вас, кто читает это, вероятно, имеют некоторый опыт использования Redux Thunk, знают, что он делает, и, возможно, думают о переходе на Redux-Saga.

Просто чтобы освежиться, обратимся к документации Redux Thunk:

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

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

Хорошо, значит, Redux Thunk работает хорошо. Тогда почему мы должны выбрать Saga вместо этого? Как и в случае с любыми другими решениями, с каждым всегда связаны плюсы и минусы. Я думаю, что основная причина, по которой вы выберете Thunk вместо Saga, - это быстрые и простые проекты, поскольку настроить Thunk намного проще. Кроме того, Сага почти всегда лучший вариант.

Почему Redux-Saga?

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

По причинам масштабируемости все упомянутые выше функции делают Saga лучше Thunk, особенно когда дело доходит до тестирования. Хотя тестирование преобразователей не невозможно, для этого требуются имитирующие вызовы API и другие функции, которые используются в преобразователях, в результате чего код становится менее читаемым и беспорядочным.

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

Рефакторинг от Thunk до Saga

Чтобы выполнить рефакторинг с Thunk на Saga, нам нужно сначала лучше понять, как работает Saga.

Предположим, мы хотим иметь какую-то кнопку, которая запрашивает данные из API при нажатии.

1. Действие отправки

fetchData() {
    const { data } = this.props
    dispatch({type: 'FETCH_REQUESTED', payload: data})
  }

2. Создайте сагу, которая отслеживает все действия FETCH_REQUESTED, которые запускают вызов API для выборки данных.

Некоторые примечания для лучшего понимания приведенного выше кода:

• Как отмечается в MDN Web Docs, ключевое слово yield приостанавливает выполнение функции генератора, и значение выражения, следующего за ключевым словом yield, возвращается вызывающей стороне генератора.
• call(api.fetchData, action.payload.data) вызывает fetchData (асинхронную) функцию, которая принимает action.payload.data в качестве аргумента.
• Результат становится похожим на await [promise].
• put дает указание промежуточному программному обеспечению выполнить соответствующее действие.
• Обратите внимание на разницу между takeEvery и takeLatest. Это то, что делает Redux-Saga такой мощной!

Теперь, когда мы понимаем, как работает Saga в целом, давайте посмотрим, как можно выполнить рефакторинг с Thunk на Saga.

Используя Thunk, наш actions файл будет содержать функции, которые выглядят примерно так:

Здесь я использую одну функцию в качестве примера из предыдущего проекта. Просто сосредоточьтесь на структуре.

Теперь, чтобы реорганизовать наш код в Saga, мы можем выполнить следующие шаги:

1. Refactor API вызывает отдельный файл как обещания.
2. Рефакторинг функций для возврата простого объекта действия вместо преобразователей (то есть функций обратного вызова) с типом действия, который объявляет, что вызов API запрошен (здесь я вызываю его CREATE_USER_DATA). Затем экспортируйте все различные типы действий.

Создавайте саги

Создайте новый файл для наших саг:

В результате каждый раз, когда мы хотим создать новые данные пользователя, мы просто пишем:

dispatch(createUser());

И Redux-Saga сделает свое дело! И последнее, но не менее важное: нам нужно применить промежуточное ПО Saga.

Применение промежуточного программного обеспечения Saga

В настоящее время мой код с использованием Thunk выглядит так:

import thunk from "redux-thunk";
import reducers from "./reducers";
const store = createStore(reducers, applyMiddleware(thunk));

Чтобы применить Saga, мы сначала создаем промежуточное ПО и заменяем его Thunk. Обратите внимание, что возможно использование как Saga, так и Thunk. Они не исключают друг друга, но для этого потребуется другая конфигурация.

const sagaMiddleware = createSagaMiddleware();
const store = createStore(reducers,applyMiddleware(sagaMiddleware));

Готово! Это было не так уж сложно, правда? Надеюсь, эта статья была полезна для тех, кто переходит с Thunk на Saga. Спасибо за прочтение!