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.
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.
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.
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.
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