Redux Saga to Handle Asynchronous RequestIin React

Javascript Evolution

Javascript is a great programming language, as time goes by there are more and more new tools based on it, like React Js.

‍

Introduction to Redux Saga

We will review the usage of Redux Saga, which is a middleware library used to control side effects in React projects. To understand this article, a medium knowledge level in React and Redux is required, the Side Effects received are requests made mainly by us to obtain data from different sources. In general they are API's request or external services. Browser cookies interaction, databases and real time operation.

‍

Implementation in React

Normally, In a React project these functionalities are implemented through a life cycle of a component with the code inside of the same file. Small projects are a great solution. When we have a big project we need to have the side effects centralized and Redux Saga Middleware comes in handy.

‍

Redux Structure

The redux structure presents: Actions, Actions Creators, Reducers and a Single Store and thanks to Redux we know concepts like: Render, Props, State, Context, Lifecycle, Events, reduce Saga aims to make handling side effects so we can introduce a new concept: Sagas, the saga is like a separate thread in your application that's solely for side effects, as the following shows.

‍

Middleware Functionality

The sagas run like middleware because it has Watchers and Workers. The watchers intercept the actions and review a worker to this action and in this case, run the worker function where the steps to resolve the side effect and carry data to store.

‍

Technical Foundation

Redux Saga is based on Generator Functions, which are functions that can be exited and later re-entered and their context (Variable Binding) will be saved across re-entrances. Its syntax use asterisk to define a function* and the expression yield / yield*, to program steps, pause the function and give a value or delegate to another generator function respectively.

‍

Further Learning

Redux Saga has helpers and effects creators, to see more about it, check out this presentation​, some advantages of use Redux Saga Middleware: https://redux-saga.js.org

‍

‍

Written by Erik Beltrán