Why React Saga is better then Thunk?

June 7, 2019

Tudip

What is Redux?

Redux is basically a state management library for javascript applications and is mainly used with React JS and is also familiar as predictable state container. In React, data flows from parent component to child component in the form of props.

In react mostly everything is component, so if there are too many number of components, here comes the role of redux as it manages the states of all components.

The key points of interest while working with redux are “Action”, “Dispatcher” and “Reducer”.
Action is something which triggers what needs to be done from the component dispatcher collects the action that is actively triggered and pasess it to reducer. Now reducer is responsible what needs to be done to update the store data.

Middleware

Middleware is block of code which acts as a mediater while the process of receiving a request or generating response. Here we are going to discuss about the 2 most popular libraries redux-thunk and redux-saga.

A thunk is a function that acts as a wrapper in which it wraps an expression to delay its evaluation. Thunk allows to write an action creators that return a function instead of the typical action object.

Where as redux-saga is a library that mainly focuses on easy handling of application side effects and more efficient for execution.

Redux-thunk

Thunk is a function which optionaly takes some parameters and returns another function, it takes dispatch and getState functions and both of these are supplied by Redux Thunk middleware.

Here is the basic structure of Redux-thunk

export const thunkName = parameters => (dispatch, getState) => {
// You can write your application logic here
};

Example:

import axios from "axios";
import GET_LIST_API_URL from "../config";

const fetchList = () => {
return (dispatch) => {
axios.get(GET_LIST_API_URL)
.then((responseData) => {
dispatch(getList(responseData.list));
})
.catch((error) => {
console.log(error.message);
});
};
};

const getList = (payload) => {
return {
type: "GET_LIST",
payload
};
}

export {
fetchList
}

Redux-saga

It allows one to express complex logic functions as pure functions called sagas. From a testing point of view, pure functions are desirable because they are predictable and repeatable, making them relatively easy to test. Sagas are implemented by special functions called functions of the generator. These are an ES6 JavaScript new feature. Basically, everywhere you see a yield statement, execution jumps in and out of a generator. Think of a statement of yield as causing the generator to pause and return the value of yield. The caller can then resume the generator after the yield at the statement.

Example:

import axios from "axios";
import GET_LIST_API_URL from "../config";
import {call, put} from "redux-saga/effects";

const fetchList = () => {
return axios.get(GET_LIST_API_URL);
}

function *fetchList () {
try {
const responseData = yield call(getCharacters);
yield put({type: "GET_LIST", payload: responseData.list});
} catch (error) {
console.log(error.message);
}

}

export {
fetchList
};

Conclusion

You might think that syntax is the biggest difference. Although it is true that thunks and sagas are quite different in writing and reasoning, there is something bigger. In response to an action, Thunks can never act. On the other hand, Redux-Saga subscribes to the store and can trigger a saga when some action is dispatched to run or continue.
From the above examples it is clear that react saga is a bit handy to use over react-thunk.