Зачем использовать Redux Saga?

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

Redux Saga как Middleware

Redux Saga — это промежуточное программное обеспечение(middleware), которое берет на себя управление вашими действиями до того, как напрямую достигнет reducers.

Pабота без redux saga:

Action(s) → Reducer(s)

With Redux saga as middleware:

Action(s) → Redux Saga →Reducer(s)

Redux saga действует как промежуточное middleware, которое дает разработчикам возможность аккуратно разделить любую бизнес-логику, запросы xhr (широко известные как Ajax), манипуляции с данными или любые другие операции, которые могут показаться неприемлемыми для редукторов напрямую.

Зачем использовать Sagas

Давайте посмотрим на некоторые преимущества использования Saga:

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

Включение redux saga в существующее приложение:

вам понадобится babel, чтобы преобразовать его в код ES5

Шаг 1:

npm install --save redux-saga

Шаг 2:

Без Redux saga

import { createStore, applyMiddleware } from 'redux'
import reducer from './reducers'
// create the saga middleware
const sagaMiddleware = createSagaMiddleware()
// mount it on the Store
const store = createStore(
  reducer
)

С Redux Saga

import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'
import { takeEvery } from 'redux-saga/effects'
*******************************
//Saga function
function* watchFetchData() {
  yield takeEvery('FETCH_REQUESTED', fetchData)
}
***********************************const sagaMiddleware = createSagaMiddleware()
const store = createStore(
  reducer,
  applyMiddleware(sagaMiddleware)
)
sagaMiddleware.run(watchFetchData)   // calling first saga here
const action = type => store.dispatch({type})

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

import { takeEvery } from 'redux-saga/effects'

// FETCH_USERS
function* fetchUsers(action) { ... }

// CREATE_USER
function* createUser(action) { ... }

// use them in parallel
export default function* rootSaga() {
  yield takeEvery('FETCH_USERS', fetchUsers)
  yield takeEvery('CREATE_USER', createUser)
}

Шаг 3

Напоследок напишем, что делает метод саги

import { call, put } from 'redux-saga/effects'

export function* fetchData(action) {
   try {
      const data = yield call(Api.fetchUser, action.payload.url);
      // if needed, we can put some business logic here
      
      yield put({type: "FETCH_SUCCEEDED", data})
   } catch (error) {
      yield put({type: "FETCH_FAILED", error})
   }
}

Я знаю, что многие из вас подумают, что такое call и put. Мы постараемся понять это в следующем рассказе. На данный момент было бы достаточно знать, что эффект «call» принимает первые аргументы в качестве имени функции, которая будет выполняться, например: вызвать api.fetchUser с параметром action.payload.url и оставить его в качестве параметров, а «put» можно рассматривать как псевдоним для store.dispatch ({тип: “FETCH_SUCCEEDED”, данные: данные});

В ближайшие недели я напишу следующую статью и расскажу больше об эффектах / асинхронных редукторах / тестировании и расширенном использовании.

Надеюсь, эта статья окажется для вас полезной.