Redux-Saga - co to jest i kiedy warto korzystać

Redux-Saga jest biblioteką służącą do zarządzania stanem aplikacji. Instaluje się jako middleware do Reduxa podobnie jak Redux-Thunk, ale składnia za pomocą którą się je wywołuje jest inna.

W Redux-Saga został wykorzystany dość stary koncept generatorów, który pojawił się razem z promisami na konferencji JS w 2013 roku, ale do tej pory nie był i nadal nie jest popularnym rozwiązaniem. Wydaje się dość trudny na początku do zrozumienia, ale rozwiązuje wiele problemów w postaci chociażby tzw. Callback Hell, czyli zagnieżdżonych w sobie wielu zapytań zwracających rezultaty.

Słowa kluczowe w Redux-Saga

Redux-Saga w swojej składni wykorzystuje słowa kluczowe, takie jak

call, put, takeEvery, takeLatest, all 

Każde z tych słów kluczowych jest wykorzystywane w funkcji będącej generatorem, zwracającej obiekty zwane Efektami.

Najprostszym przykładem będzie zapytanie API. W tym zapytaniu pobierzemy listę produktów do naszego sklepu e-commerce, tak by komponent, który wykorzystuję zmienną z listą produktów automatycznie się przeładował.

// saga.js
import { call, takeLatest, all } from 'redux-saga/effects'



function* fetchProducts() {

  const products = yield call(Api.fetch, '/products')

}

function* actionWatcher() {

     yield takeLatest('GET_PRODUCTS', fetchProducts)

}

export default function* rootSaga() {

   yield all([

   actionWatcher(),

   ]);

}

// app.js
const sagaMiddleware = createSagaMiddleware();



const store = createStore(

   reducer,

   applyMiddleware(sagaMiddleware),

);

sagaMiddleware.run(rootSaga);

Działanie Redux Saga składa się z następujących elementów:

1. Tworzony jest store Reduxowy i do niej podłączamy nasz sagaMiddleware
2. RootSaga za pomocą słowa kluczowego all przyjmuje listę innych obiektów saga na które nasłuchuje.
3. ActionWatcher korzystając z takeLatest nasłuchuje na zmiany w akcji reduxowej o nazwie GET_PRODUCTS
4. Komponent korzystając z Reduxa wywołuję akcję reduxową
5. Wywoływany jest generator saga fetchProducts .

Korzystanie z takeLatest jest o tyle ciekawe, że gdy ta sama akcja będzie wywołana ponownie to poprzednia zostanie anulowana. Istnieje wiele innych elementów wbudowanych w Saga, które pomagają zarządzać asynchronicznością takich jak: debounce, throttle, delay

Kiedy warto korzystać z Redux-Saga

Saga wydaje się być dobrym zamiennikiem dla Redux-Thunków i warto spróbować ją samemu we własnym projekcie. Przydaje się w szczególności wtedy, gdy mamy do czynienia ze skomplikowanym interface'm i wieloma akcjami. Słowa kluczowe czyli tzw. saga efekty rozwiązują wiele problemów związanych z asynchronicznością. Potrafią opóźnić zapytania, określić ich maksymalną częstotliwość, anulować zapytanie jak i wiele innych.