Redux-Saga
2 minuty czytania
Redux-Saga to biblioteka, która pozwala na łatwiejsze zarządzanie asynchronicznymi akcjami w aplikacjach opartych na Redux. Jest to narzędzie szczególnie przydatne w przypadku skomplikowanych projektów.
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.
Zalety korzystania z Redux-Saga
- Jedną z głównych zalet jest łatwość w zarządzaniu skomplikowanymi sekwencjami asynchronicznych operacji. Dzięki zastosowaniu generatorów i efektów umożliwia tworzenie wyrafinowanych struktur zarządzania asynchronicznością, co znacznie ułatwia pracę z danymi, które pochodzą z różnych źródeł, takich jak API lub WebSocket'y.
- Kolejną zaletą jest jego łatwość w testowaniu. Dzięki temu, że logika asynchroniczna jest odseparowana od samej aplikacji, możliwe jest łatwe i dokładne testowanie modułów Redux-Saga, co z kolei prowadzi do większej pewności, że aplikacja działa tak, jak powinna.
- Warto również zwrócić uwagę na skalowalność Redux-Saga. Ta biblioteka jest zaprojektowana w taki sposób, aby umożliwić łatwe dodawanie nowych funkcjonalności do aplikacji, co sprawia, że jest idealna do zastosowania w większych projektach.
- Ostatnią zaletą jest jej elastyczność. Dzięki temu, że biblioteka opiera się na generatorach, możliwe jest tworzenie różnych typów sekwencji asynchronicznych operacji, co pozwala na dostosowanie Redux-Saga do konkretnych potrzeb projektu.
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.
Nasza oferta
Web development
Dowiedz się więcejMobile development
Dowiedz się więcejE-commerce
Dowiedz się więcejProjektowanie UX/UI
Dowiedz się więcejOutsourcing
Dowiedz się więcejPowiązane artykuły
Warm Calling: Czym jest i dlaczego jest skuteczny?
20 gru 2024
Warm Calling odgrywa kluczową rolę w biznesie, stanowiąc strategię o dużej skuteczności. Pomimo swojej prostoty, nie jest jeszcze powszechnie stosowany. Czy jesteś ciekaw, jak ta metoda działa i jakie przynosi korzyści? Zapraszam do lektury.
Architecture Decision Record (ADR): Klucz do zrozumienia projektu IT
20 gru 2024
Architecture Decision Record (ADR) to narzędzie gwarantujące przejrzystość i zrozumienie kierunków projektu IT. Formuje ono dokumentację, która pomaga zrozumieć, dlaczego pewne koncepcje zostały przyjęte lub odrzucone. ADR to klucz, który odkrywa istotę strategicznych decyzji w projektach IT.
Modular Monolith: Wprowadzenie do nowoczesnej architektury monolitycznej
20 gru 2024
Czy możemy połączyć zalety monolitu i mikroserwisów? Wyjaśniamy koncepcję Modularnego Monolitu, nowoczesnego podejścia do projektowania aplikacji monolitycznych. Te praktyki pomagają zorganizować kod w łatwy do zrozumienia, skalowalny i łatwy do utrzymania sposób. Dowiedz się, jak zastosować tę koncepcję w swoim projekcie.
Product Vision Board - klucz do skutecznego planowania produktu. Dlaczego warto go stosować?
19 gru 2024
Zarządzanie produktem to sztuka łącząca strategię, praktyczność i wizjonerskie myślenie. Jednym z najważniejszych narzędzi pomagających w efektywnej koordynacji teorii i praktyki jest Product Vision Board - klucz do efektywnego planowania. Ale dlaczego jest tak ważny i dlaczego warto go stosować? Zaczynając od definicji, przejdziemy do korzyści wynikających z stosowania tego narzędzia.
PBN w SEO: Czy warto inwestować w swoją strategię marketingową?
19 gru 2024
Pozycjonowanie stron to skomplikowany proces, w którym ważną rolę odgrywa budowanie sieci PBN. Czy inwestycja w Prywatne Sieci Blogów to skuteczna strategia SEO? Czy warto zainwestować swoje zasoby w taką formę marketingu? Ten artykuł ma na celu odpowiedzieć na te pytania.
Hosting dedykowany a współdzielony: Porównanie i wybór optymalnego rozwiązania
19 gru 2024
Rozwój firmy często wiąże się z koniecznością podjęcia decyzji o wyborze odpowiedniego hostingu. Istotne jest zrozumienie, czym różnią się od siebie hosting dedykowany i współdzielony, aby móc świadomie wybrać najbardziej optymalne rozwiązanie. Zapraszam do porównania tych dwóch usług.
Design Fiction: Czym jest i jak wpływa na rozwój technologii?
18 gru 2024
Design Fiction to intrygująca koncepcja, łącząca sferę wyobraźni z praktycznym projektowaniem technologii. Doskonale obrazuje, jak fikcyjne scenariusze mogą wpływać na rozwój nowych rozwiązań technologicznych. Czy jest to idealny punkt startowy dla nowych wynalazków, czy raczej jakie zagrożenia niesie za sobą? Zapraszamy do lektury!
Zobacz wszystkie artykuły