Redux-Saga
2 minutes of reading
Redux-Saga is a library that allows you to more easily manage asynchronous actions in Redux-based applications. This tool is especially useful for complex projects.
Redux-Saga is a library for managing application state. It installs as middleware to Redux similarly to Redux-Thunk, but the syntax with which it is called is different.
Redux-Saga uses a rather old concept of generators, which appeared together with promises at the JS conference in 2013, but until now was not and still is not a popular solution. It seems quite difficult to understand at first, but it solves a lot of problems in the form of at least the so-called Callback Hell, i.e. nested multiple queries returning results.
Keywords in Redux-Saga
Redux-Saga uses keywords in its syntax, such as:
call, put, takeEvery, takeLatest, all
Each of these keywords is used in a function that is a generator, returning objects called Effects.
The simplest example would be an API query. In this query, we will retrieve a list of products for our e-commerce store, so that the component that uses the variable with the list of products will automatically reload.
// 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);
The operation of Redux Saga consists of the following:
1. A Redux store is created and we connect our sagaMiddleware to it.
2. The RootSaga using the keyword all accepts a list of other saga objects to which it listens.
3. ActionWatcher using takeLatest listens for changes in the Redux action named GET_PRODUCTS
4. The component using Redux calls the redux action
5. saga generator fetchProducts is called .
Using takeLatest is interesting in the sense - when the same action is called again the previous one is canceled. There are many other elements built into Saga that help manage asynchronicity such as debounce, throttle, delay.
When to use Redux-Saga
Saga seems to be a good replacement for Redux-Thunks, and it's worth trying it yourself in your own project. It comes in handy especially when you are dealing with a complicated interface and many actions. Keywords, or so-called saga effects, solve many problems related to asynchronicity. They can delay queries, determine their maximum frequency, cancel a query as well as many others.
Our offer
Web development
Find out moreMobile development
Find out moreE-commerce
Find out moreUX/UI Design
Find out moreOutsourcing
Find out moreRelated articles
The Manifest Names Boring Owl as one of the Most-Reviewed UX Agencies in Warsaw
22 Jul 2024
When introducing a new digital product or solution, focusing on User Experience (UX) can significantly set you apart from the competition.
![related-article-image-trophy](/_next/image?url=https%3A%2F%2Fd2ooyrflu7lhqd.cloudfront.net%2Fboringowl_io_hand_holding_the_trophy_outside_in_simple_style_b24d5057_eb81_4e93_a106_7af29f7f9c87_1_1_1_715a9cdc84.png%3Fformat%3Dauto&w=3840&q=75)
Website redesign vs. refresh: Evaluating the benefits and drawbacks
11 Jul 2024
In an ever-evolving digital landscape, businesses are constantly called to re-evaluate their online presence. The dilemma often lies in the decision between a complete website redesign or a website refresh. Both actions present unique benefits and challenges. This article aims to dissect these options, highlighting their advantages and disadvantages to better inform your next digital strategy.
How to incorporate machine learning into e-commerce platform
11 Jul 2024
E-commerce thrives on delivering personalized experiences to customers. Harnessing the power of Machine Learning (ML) can redefine these experiences, by predicting user behavior, tailoring recommendations and automating tasks. In this article, we explore the integration of ML into your E-Commerce platform and unveil its transformative potential.
How colours influence website perception?
10 Jul 2024
Bright red sales sign, soothing blue blog post, or an enigmatic black homepage, colors speak volumes in web design. The psychology of colors plays a critical role in how users perceive websites, influencing their actions and decisions subtly shaping the online experience. Let's delve into understanding this colored web of psychology.
Navigating App Development: Web, Mobile or Hybrid?
10 Jul 2024
Embarking on the journey of app development often comes with a critical decision: Web, Mobile, or Hybrid? Each offers unique benefits and challenges, suited to different project demands and goals. This article attempts to navigate through this complex landscape, offering insights to make the best choice.
Crucial role of interruption testing
9 Jul 2024
The rise of digital applications in today's fast-paced world undeniably rests on their performance. But when apps stutter or crash, the culprit can often be traced back to unanticipated interruptions. Understanding this, we delve into the world of 'Interruption Testing', an unsung hero in app performance optimization, which challenges the robustness of applications in the face of unprecedented events and interruptions.
React Native vs Flutter: A comprehensive guide on mobile app development technologies
9 Jul 2024
In the era of mobile app development, choosing the right tech stack becomes crucial. React Native and Flutter, raise as frontrunners with their unique offerings. This article offers an in-depth comparison between the two, aiding you in making informed development decisions.
Show all articles