React js: Compare Redux-thunk and Redux saga

Tram Ho

Hello everyone, I am currently training on React js and I am quite struggling with a series of concepts in React Js. Today I would like to write an article on issues that are quite in-depth in React Js. If you are new to React, you should understand these issues first: Component, props, state, life cycle, …

Before going into 2 concepts, Redux thunk and Redux-saga. I’ll go over to Redux, what is it and what is it used for?

Redux

When redux was not born, if I wanted to transfer data from a component to another component, at that component I would get it through props, and if I assigned the value of the state of the component that props I passed, it re-rendered the UI. In case I transfer data from my grandfather’s component to my grandchildren’s component, it is through the parent component. This in complex applications will be difficult to manage in the state, not to mention that if a bug occurs, debugging to find the problem is not simple, along with many other issues, Redux. has appeared to resolve this issue:

Take a look at the diagram below:

First redux has 3 main components:

  • action: When a user performs an action or event such as submitting a form or calling an api, that action will have to be sent to the redux store by the store.dispatch () method and I will pass the action to it. For example:

  • Reducer: The Reducer will take actions, then analyze and return new states to the store
  • Store: A very important component, it will contain the state of the components. Through it from a component I will connect to the store to get, update the state for the component

At this point, you can probably use it, instead of transmitting data from the grandfather component to the grandchildren component and having to pass the parent component. then I won’t transmit that type anymore. But I will put all the data stored in a state on a redux store only. then if any component you want to use, just go to the store to get it.

Middleware library

ok so I understand the role of redux in react js application, in fact, there are other issues when dealing with states in redux store, for example I want to call api, or use setTimeout functions to manipulate What about the state, all of these are called side effects, so how do I handle those side effects? Now the middleware library will help handle these issues. You can understand that the middleware library is the component standing between actions and reducers. When an action is dispatched into the reducer, it checks to see if the action is executed asynchronously, if it does, it will wait for the asynchronous action to complete and then put the action into the reducer.

Some common library middleware:

  • Redux-thunk
  • Redux-saga
  • Redux-promise

Redux-thunk

Within the scope of this article I will only talk about redux thunk and redux saga. Redux thunk: As you probably know, actions often return object types, often called plain Javascript objects . In case I want to call an api to return a list of trending, my action cannot return a plain plain JavaScript object, but I will have to return a function, such action is called async action. Here is the code for my example:

Take a look at my first action, here I return a function and this function will conduct call api to get listTrending, this time redux thunk it will allow the program to stop until the api has finished calling and return results. Next I call to an action below the newly-received data transfer and at this time redux thunk it will check this action does not perform async so it will give it to the reducer for processing. This is also a basic process that redux thunk performs. It is quite simple, but how to set up redux thunk, you can see here: https://github.com/reduxjs/redux-thunk

Redux saga

In terms of mechanism of action, it is similar to thunk, used to handle side effects. Redux saga provides helper effect functions, which return an effect object that contains special information instructing Redux’s middeware to perform other actions. The helper effect functions will be executed in the generator function. Generator function is a new feature in ES6, it is also a function. However, the special feature of this function is that it can pause to perform another task, or can call another Generator function. Generator function Details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*

Some generator function helper used by redux saga:

  • takeEvery (): executes and returns the result of every called action.
  • takeLastest (): means that if we perform a series of actions, it will only execute and return the result of the last action.
  • take (): pause until the action is received
  • put (): dispatch an action. -call (): call the function. If it returns a promise, pause the saga until the promise is resolved.
  • race (): run multiple effects simultaneously, then cancel all if one of them ends

Summary:

For redux thunk it has the following advantages and disadvantages:

Redux ThunkRudux-saga
AdvantagesSimple, powerful, easy to useFor complex problems, write long code, difficult to read, difficult to maintain, difficult to describe the problem
DefectDealing with complex projects, solving chanins of promises, helping clean codeComplicated, time-consuming for new members to join the team, heavy on logic processing, not for simple applications

Above is that I have shared about redux-thunk and resux-saga. These are two middleware libraries that are heavily used in Reactjs, the choice of redux-thunk or redux-saga depends on the project. If the article has a wrong issue, expect everyone to contribute comments to the article is completed.

References

https://medium.com/@shoshanarosenfield/redux-thunk-vs-redux-saga-93fe82878b2d

Share the news now

Source : Viblo