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.
