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.

Praca na laptopie, Redux-Saga

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.

Powiązane artykuły

Jak wykorzystać pliki cookies do poprawy jakości działania strony internetowej?

16 mar 2023

W erze cyfrowej, gdzie użytkownicy oczekują szybkich, spersonalizowanych i bezproblemowych doświadczeń online, coraz więcej właścicieli stron internetowych poszukuje skutecznych sposobów na poprawę jakości swoich witryn. Jednym z narzędzi, które może przyczynić się do osiągnięcia tego celu, są pliki cookie.

Tomasz Kozon
related-article-image-ciasteczka, pliki cookies

Reklamowanie się w Gmailu za pomocą Gmail Sponsored Promotion.

15 mar 2023

Reklama w internecie to obecnie niezbędny element strategii marketingowych dla firm każdej wielkości i branży. Jednym z kanałów reklamowych, które zdobywają coraz większą popularność, jest Gmail Sponsored Promotion. To narzędzie pozwala na wyświetlanie reklam w skrzynce odbiorczej użytkowników Gmaila w sposób nieinwazyjny i dopasowany do profilu odbiorcy.

Tomasz Kozon

Jakie są różnice między atrybutami nofollow i dofollow?

14 mar 2023

W świecie SEO atrybuty nofollow i dofollow są pojęciami, z którymi każdy właściciel strony internetowej powinien się zapoznać. Oba atrybuty stanowią ważny element optymalizacji strony internetowej, wpływając na jej pozycję w wynikach wyszukiwania. Atrybut nofollow i dofollow oznaczają dwa różne podejścia do linkowania, a ich właściwe stosowanie może przynieść korzyści dla witryny internetowej w postaci zwiększenia ruchu i poprawy reputacji w oczach algorytmów wyszukiwarek.

Tomasz Kozon

Definition of Done w metodologii Agile - jak wykorzystać ten koncept w praktyce

14 mar 2023

W dzisiejszym dynamicznym świecie zarządzania projektami IT, metodologia Agile zyskuje coraz większą popularność jako elastyczne i efektywne podejście do wytwarzania oprogramowania. Wśród kluczowych konceptów Agile, Definition of Done (DoD) pełni istotną rolę w utrzymaniu wysokiej jakości produktów oraz sprawnym monitorowaniu postępów projektu.

Tomasz Kozon

Geotargetowanie w strategii marketingowej: Jak może przyczynić się do wzrostu sprzedaży i świadomości marki

14 mar 2023

W erze cyfryzacji i rosnącej konkurencji na rynku, przedsiębiorstwa poszukują coraz bardziej efektywnych i innowacyjnych strategii marketingowych. Geotargetowanie, czyli wykorzystanie danych geolokalizacyjnych w celu dostarczania spersonalizowanych treści i reklam, stało się jednym z kluczowych narzędzi w budowaniu skutecznych kampanii.

Tomasz Kozon

Co to jest robots.txt i do czego służy?

14 mar 2023

Robots.txt to plik, który jest często pomijany przez właścicieli stron internetowych, a jednocześnie może mieć kluczowe znaczenie dla ich widoczności w wyszukiwarkach. Plik ten określa zasady, według których roboty wyszukiwarek powinny indeksować naszą witrynę. Właściwe wykorzystanie pliku pozwala kontrolować indeksowanie poszczególnych sekcji naszej witryny, co zwiększa jej bezpieczeństwo oraz skupia uwagę robotów na najważniejszych elementach.

Tomasz Kozon

Dlaczego evergreen content jest ważny dla strategii marketingowej?

13 mar 2023

W dzisiejszych czasach, gdy konkurencja w internecie jest ogromna, a uwaga użytkowników skupia się na krótkich treściach, evergreen content stanowi odrębną wartość w strategii marketingowej. Dzięki swojej trwałości i wartości, pozwala na przyciąganie uwagi i angażowanie odbiorców na długi czas.

Tomasz Kozon

Zobacz wszystkie artykuły