Blog / JavaScript / React / Handling Side Effects in Redux: Redux-Saga

Handling Side Effects in Redux: Redux-Saga

By Adaware Oghenero 38,765 November 29, 2019

Category:

JavaScript

React

Handling Side Effects in Redux Redux-Saga

In this article you will learn the following:

1. How side-effects are handled in Redux
2. What Redux-saga is
3. What generator functions are
4. How to handle side-effects using redux-saga while building a simple application

If you have used Redux in a React project before, there gets a point, where you will have to handle side-effects(asynchronous) like API calls or setting timeout and intervals, because these are required when building features of a “complex web application.”

The Redux architecture is meant to provide predictable state change, meaning it takes an action and state then returns a new state. This architecture doesn’t provide any built-in means for handling asynchronous changes to the Redux state tree.

Redux flow

So where can we put our side-effects in the Redux flow? We could handle our side-effects at the component level then dispatch an action with the resolved result of the side effects.

class App extends React.Component {

  fetchUser=(id)=>{
    Api.fetchUser().then(res =>{
      let user = res.user
      dispatch({type: "USER_FETCH_SUCCEEDED", user: user})
    })
    .catch(err =>{
      dispatch({type: "USER_FETCH_FAILED", message: err.message})
    })
  }

  render() {
    const {id} = this.state
      return (
          <div>
              <button onClick={()=>this.fetchUser(id)}>Fetch User</button>
          </div>
      );
  }
}

class App extends React.Component {

fetchUser=(id)=>{

Api.fetchUser().then(res =>{

let user = res.user

dispatch({type: "USER_FETCH_SUCCEEDED", user: user})

})

.catch(err =>{

dispatch({type: "USER_FETCH_FAILED", message: err.message})

})

}

render() {

const {id} = this.state

return (

<div>

<button onClick={()=>this.fetchUser(id)}>Fetch User</button>

</div>

);

}

But the problem with this approach is that in large applications, you might have multiple components that want to fetch a user, so you might have duplicate logic, and this becomes difficult to maintain.

Another option is to move the async logic(side-effect) to the action creators. Usually, in redux, action creators are functions that return an action; a plain object that must have a type property, at least.

function fetchData(param) {
	return {
		type: "FETCH_DATA",
		payload: param
	};
}

function fetchData(param) {

return {

type: "FETCH_DATA",

payload: param

};

}

We can use a middleware like redux-thunk which allows you to dispatch functions/promises and write async logic in your action creators. What the middleware does is look at every action dispatched, if it is a function, it calls that function and pass two arguments; the store’s dispatch method, which can be used to dispatch plain action objects when the asynchronous code has failed or succeeded and the store’s getState method is passed to it so the store can be read and used in the action creators.

class App extends React.Component {
	render() {
		const { id } = this.state;
		const { dispatch } = this.props;
		return (
			<div>
				<button onClick={() => dispatch(requestUser(id))}>Fetch User</button>
			</div>
		);
	}
}

// action creator(thunk)

function requestUser(id) {
	return function(dispatch) {
		return Api.fetchUser()
			.then(res => {
				let user = res.user;
				dispatch({ type: "USER_FETCH_SUCCEEDED", user: user });
			})
			.catch(err => {
				dispatch({ type: "USER_FETCH_FAILED", message: err.message });
			});
	};
}

class App extends React.Component {

render() {

const { id } = this.state;

const { dispatch } = this.props;

return (

<div>

<button onClick={() => dispatch(requestUser(id))}>Fetch User</button>

</div>

);

}

// action creator(thunk)

function requestUser(id) {

return function(dispatch) {

return Api.fetchUser()

.then(res => {

let user = res.user;

dispatch({ type: "USER_FETCH_SUCCEEDED", user: user });

})

.catch(err => {

dispatch({ type: "USER_FETCH_FAILED", message: err.message });

});

};

}

Here, we have the fetch user API call in the action creator, so any component that needs to fetch a user can dispatch the requestUser() action instead of duplicating logic.

Using a middleware like redux-thunk has its benefits:

The business logic is not tightly coupled to the UI components so it can be reused by components.
It is easy to learn unlike redux-saga(which we will be covering later in this article) because you don’t need to learn new JavaScript concepts to use it.

It also has some disadvantages:

It can become difficult to read and understand when you start dealing with complex async login in complex applications.
It doesn’t provide any way to handle advanced async operations like cancellation and debouncing.

Despite its negatives, Redux-thunk remains the most used redux middleware for handling side-effects, and it works for most use-cases, but it doesn’t work in complex applications where you might want to cancel an API request after an action has been dispatched, or you want to debounce a function call.

This complex situation is where a middleware like redux-saga thrive, it helps you handle these easily using special function called effects provided by redux-saga.

Redux-saga also allows us to write async code in a declarative manner hence it is more readable and easier to test. Now we will do a deep dive into Es6 generators and Redux-saga, then we will build a trivial application using redux-saga middleware.

Redux-saga

Redux-saga is built on the concept of generators which was introduced as part of the ECMAScript 2015 module. Generators are a powerful concept, which you might not use every day in programming but its strengths were leveraged to create Redux-saga, which then gives users the ability to write asynchronous code in a synchronous manner, thereby eliminating problems with callbacks(callback hell), as well as helps to run side-effects in parallel, cancel them, etc. Both of which are difficult or impossible using redux-thunk.

What is a Generator function?

A generator function is a function that can be paused and later resumed while retaining its variable bindings(context). It is denoted with an asterisk in front of the function keyword.

function* myFunction() {
	//
	//
}

function* myFunction() {

}

Unlike a normal function in JavaScript, which runs until it gets to a return statement or until it has completely executed, generators run until it gets to a yield or return statement.

When a generator function is invoked, it doesn’t execute the function body immediately, instead — it returns an iterable/generator object that can be iterated or looped through using the iterator’s next() method or a for..of loop.

function* gen() {
	yield 1;
	yield 2;
	yield 3;
	yield 4;
}

let myGenerator = gen();

console.log(myGenerator.next()); //{value: 1, done: false}
console.log(myGenerator.next()); //{value: 2, done: false}
console.log(myGenerator.next()); //{value: 3, done: false}
console.log(myGenerator.next()); //{value: 4, done: false}
console.log(myGenerator.next()); // {value: undefined, done: true}

function* gen() {

yield 1;

yield 2;

yield 3;

yield 4;

}

let myGenerator = gen();

console.log(myGenerator.next()); //{value: 1, done: false}

console.log(myGenerator.next()); //{value: 2, done: false}

console.log(myGenerator.next()); //{value: 3, done: false}

console.log(myGenerator.next()); //{value: 4, done: false}

console.log(myGenerator.next()); // {value: undefined, done: true}

Each iteration is defined by the yield keyword, so when you execute a generator function and call its next() method, it runs the function until it encounters the first yield statement, then it pauses and returns an object containing a value and done property;value is anything on the right-hand side of the keyword yield, it can be a value(integer, string), function, object, promise, etc., while the done property is a boolean, which indicates if it is done iterating thorough the iterable.

So how does this fit with redux-saga? In redux-saga, we move our side-effects from the action-creators to generator functions called sagas. What redux-saga does is to run our sagas(generator functions) and provide methods for handling the side-effects and also interacting with the redux store. redux-saga executes our generator functions(sagas) containing the side-effects then handles the process of calling the next() on the generator object internally.

Below is a simple saga that makes a cup of coffee after 10 mins:

const delay = ms => new Promise(res => setTimeout(res, ms));

function* makeCoffee() {
	yield take({ type: "REQUEST_COFFEE" });
	yield delay(10000);
	yield put({ type: "COFFEE_DONE" });
}

const delay = ms => new Promise(res => setTimeout(res, ms));

function* makeCoffee() {

yield take({ type: "REQUEST_COFFEE" });

yield delay(10000);

yield put({ type: "COFFEE_DONE" });

}

This is just a simple snippet of a saga that yields objects to the redux-saga middleware. The yielded objects are like instructions to be interpreted by the middleware. You might have noticed functions take, delay and put in the saga above, these are helper functions provided by redux-saga. We will walk through each line of the saga to understand what it does, then I will show the redux-thunk implementation.

The first line in the example above:

yield take({type:'REQUEST_COFFEE'})

1	yield take({type:'REQUEST_COFFEE'})

take is an effect that instructs the redux-saga middleware to wait for the REQUEST_COFFEE action to be dispatched by the store before it resumes execution of the generator function. So this function is paused until someone dispatches a REQUEST_COFFEE action; then when it is dispatched, it resumes execution and executes it until the next yield.

yield delay(60000)

1	yield delay(60000)

delay is a function that returns a promise so when a promise is yielded to the redux-saga middleware, the middleware pauses the saga until the promise is resolved then execution resumes after 60 seconds. As I said earlier anything can be yielded by a generator function, it can be a function, promise, or value. But what redux-saga does here is that when it is yielded a promise, it has to wait for it to be resolved. This is quite similar to the async await way of handling promises.
So after 60 seconds, execution resumes until it gets to the final yield

yield put({type:'COFFEE_DONE'})

1	yield put({type:'COFFEE_DONE'})

put is another effect provided by redux-saga which can be used to dispatch actions in a saga. So this instructs the middleware to dispatch an action COFFEE_DONE to the store.

put and take are examples of helpers effects provided by redux-saga. Effects are plain JavaScript objects which contain specific instructions to be carried out by the middleware.

Effects are divided into two groups in redux-saga, blocking call and non-blocking call.

A blocking call means that the saga yielded an effect and will wait for the outcome of its execution before resuming execution inside the generator function.

A non-blocking call means the saga will resume immediately after yielding the effect.

Blocking vs Non-blocking calls

There are more helper effects, but these are some of them. You can check out the redux-saga docs for all of them.

Demo Application

Now that we have a little knowledge of generators and redux-saga, we will be building a simple application that calls the Jikan API, an unofficial API for MyAnimeList, to get the top animes airing and also search for your favorite anime.

This is what the application will look like

Live Demo of the application

Folder Structure

└───src
    │   Api.js
    │   App.js
    │   App.module.css
    │   constants.js
    │   index.css
    │   index.js
    │   rootSaga.js
    │   store.js
    │
    ├───components
    │       AnimeList.jsx
    │       AnimeList.module.css
    │       TopAnimes.jsx
    │       TopAnimes.module.css
    │
    └───ducks
            actions.js
            reducer.js
            sagas.js
            types.js

└───src

│ Api.js

│ App.js

│ App.module.css

│ constants.js

│ index.css

│ index.js

│ rootSaga.js

│ store.js

│

├───components

│ AnimeList.jsx

│ AnimeList.module.css

│ TopAnimes.jsx

│ TopAnimes.module.css

│

└───ducks

actions.js

reducer.js

sagas.js

types.js

index.js

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import store from "./store";
import "./index.css";
import App from "./App";

ReactDOM.render(
	<Provider store={store}>
		<App />
	</Provider>,
	document.getElementById("root")
);

import React from "react";

import ReactDOM from "react-dom";

import { Provider } from "react-redux";

import store from "./store";

import "./index.css";

import App from "./App";

ReactDOM.render(

<App />

</Provider>,

document.getElementById("root")

);

This is the entry point of our application. In this file, we wrapper the App component with the react-redux Provider, which gives the App component and any component below it in the component tree access to the redux store if it is wrapped using connect() function.

store.js

import { applyMiddleware, createStore, compose } from "redux";
import createSagaMiddleware from "redux-saga";
import rootSaga from "./ducks/sagas";
import { animeReducer } from "./ducks/reducer";

const composeEnhancers =
	(window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ &&
		window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
			trace: true,
			traceLimit: 25
		})) ||
	compose;

const sagaMiddleware = createSagaMiddleware();

const store = createStore(
	animeReducer,
	composeEnhancers(applyMiddleware(sagaMiddleware))
);

sagaMiddleware.run(rootSaga);

export default store;

import { applyMiddleware, createStore, compose } from "redux";

import createSagaMiddleware from "redux-saga";

import rootSaga from "./ducks/sagas";

import { animeReducer } from "./ducks/reducer";

const composeEnhancers =

(window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ &&

window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({

trace: true,

traceLimit: 25

})) ||

compose;

const sagaMiddleware = createSagaMiddleware();

const store = createStore(

animeReducer,

composeEnhancers(applyMiddleware(sagaMiddleware))

);

sagaMiddleware.run(rootSaga);

export default store;

In this file, we set up the redux-store, the redux-saga middleware, and the redux-devtools.

const sagaMiddleware = createSagaMiddleware();
```

The line above creates the saga middleware

```js
const store = createStore(
	animeReducer,
	composeEnhancers(applyMiddleware(sagaMiddleware))
);

const sagaMiddleware = createSagaMiddleware();

```

The line above creates the saga middleware

```js

const store = createStore(

animeReducer,

composeEnhancers(applyMiddleware(sagaMiddleware))

);

This line creates the store using redux createStore function, the first argument passed to it is the root reducer while the second argument is the enhancer, and it composes the redux-devtools and the saga middleware together.

sagaMiddleware.run(rootSaga);

1	sagaMiddleware.run(rootSaga);

This line above dynamically runs the sagas, and it takes a saga as an argument.

App.js

import React, { useEffect, useState } from "react";
import { connect, useDispatch } from "react-redux";
import AnimeList from "./components/AnimeList";
import TopAnimes from "./components/TopAnimes";
import styles from "./App.module.css";
import { requestTopAnime, requestSearchAnime } from "./ducks/actions";
import { getTopAnimesResults, getSearchResults } from "./ducks/reducer";

function App(props) {
	const [query, setQuery] = useState("");
	const dispatch = useDispatch();

	const fetchQuery = () => {
		dispatch(requestSearchAnime(query));
	};

	useEffect(() => {
		dispatch(requestTopAnime());
		dispatch(requestSearchAnime());
	}, [dispatch]);

	return (
		<>
			<header className={styles.header}>
				<div className={styles.logo}>Anime Viewer</div>
				<nav className={styles.nav}>
					<input
						type="text"
						className={styles.searchField}
						value={query}
						onChange={e => setQuery(e.target.value)}
					/>
					<button className={styles.searchBtn} onClick={fetchQuery}>
						Search
					</button>
				</nav>
			</header>
			<main className={styles.content}>
				<AnimeList animes={props.animes} />
				<TopAnimes topAnimes={props.topAnimes} />
			</main>
		</>
	);
}

const mapStateToProps = state => ({
	topAnimes: getTopAnimesResults(state),
	animes: getSearchResults(state)
});

export default connect(mapStateToProps, null)(App);

import React, { useEffect, useState } from "react";

import { connect, useDispatch } from "react-redux";

import AnimeList from "./components/AnimeList";

import TopAnimes from "./components/TopAnimes";

import styles from "./App.module.css";

import { requestTopAnime, requestSearchAnime } from "./ducks/actions";

import { getTopAnimesResults, getSearchResults } from "./ducks/reducer";

function App(props) {

const [query, setQuery] = useState("");

const dispatch = useDispatch();

const fetchQuery = () => {

dispatch(requestSearchAnime(query));

};

useEffect(() => {

dispatch(requestTopAnime());

dispatch(requestSearchAnime());

}, [dispatch]);

return (

<div className={styles.logo}>Anime Viewer</div>

<input

type="text"

className={styles.searchField}

value={query}

onChange={e => setQuery(e.target.value)}

</button>

</nav>

</header>

</main>

</>

);

}

const mapStateToProps = state => ({

topAnimes: getTopAnimesResults(state),

animes: getSearchResults(state)

});

export default connect(mapStateToProps, null)(App);

This is the parent component of our application, when it is about to mount it dispatches two actions to the redux store; requestTopAnime which requests the top airing animes and requestSearchAnime() which requests the top animes of all time. requetSearchAnime() is also used to search for animes if a query argument is passed to it.

This component has a search field so you can search for your favorite anime and two other components AnimeList and TopAnimes.

AnimeList.js

const AnimeList = props => {
	return (
		<section className={styles.listContainer}>
			{props.animes.map(anime => {
				return (
					<div key={anime.mal_id} className={styles.anime}>
						<img src={anime.image_url} alt={anime.title} />
						<div className={styles.overlay}>
							<p className={styles.title}>{anime.title}</p>
							<p className={styles.rating}>
								<span>Score:</span> {anime.score}
							</p>
						</div>
					</div>
				);
			})}
		</section>
	);
};

const mapStateToProps = state => ({
	animes: getSearchResults(state)
});

export default connect(mapStateToProps)(AnimeList);

const AnimeList = props => {

return (

{props.animes.map(anime => {

return (

<p className={styles.title}>{anime.title}</p>

<span>Score:</span> {anime.score}

</p>

</div>

);

})}

</section>

);

};

const mapStateToProps = state => ({

animes: getSearchResults(state)

});

export default connect(mapStateToProps)(AnimeList);

This component displays the search results if there is a query, or the best animes if the query field is empty. We connect this component to the Redux store using react-redux connect() function. Also, we have a state selector getSearchResults that is used to select the part of the state needed in this component.

TopAnimes.js

const TopAnimes = props => {
	return (
		<aside>
			<p>Top airing anime</p>
			<div className={styles.rankContainer}>
				{props.topAnimes.slice(0, 20).map(item => {
					return (
						<div className={styles.rankItem} key={item.mal_id}>
							<img
								src={item.image_url}
								alt={item.title}
								className={styles.rankImage}
								height="70"
								width="50"
							/>
							<div className={styles.rankDetails}>
								<p>{item.title}</p>
								<p>Episode: {item.episodes}</p>
							</div>
						</div>
					);
				})}
			</div>
		</aside>
	);
};

const mapStateToProps = state => ({
	topAnimes: getTopAnimesResults(state)
});

export default connect(mapStateToProps)(TopAnimes);

const TopAnimes = props => {

return (

<aside>

<p>Top airing anime</p>

{props.topAnimes.slice(0, 20).map(item => {

return (

<img

src={item.image_url}

alt={item.title}

className={styles.rankImage}

height="70"

width="50"

<p>{item.title}</p>

<p>Episode: {item.episodes}</p>

</div>

);

})}

</div>

</aside>

);

};

const mapStateToProps = state => ({

topAnimes: getTopAnimesResults(state)

});

export default connect(mapStateToProps)(TopAnimes);

It is similar to the AnimeList component, but it renders the lists of top animes airing. It has a state selector getTopAnimesResults for selecting the relevant state it needs.

actions.js

import * as types from "./types";

export const requestSearchAnime = payload => ({
	type: types.SEARCH_REQUEST,
	payload: payload
});

export const fulfilledSearchAnime = payload => ({
	type: types.SEARCH_SUCCESS,
	payload: payload
});

export const failedSearchAnime = payload => ({
	type: types.SEARCH_FAILURE,
	payload: payload
});

export const requestTopAnime = payload => ({
	type: types.TOPANIME_REQUEST,
	payload: payload
});

export const fulfilledTopAnime = payload => ({
	type: types.TOPANIME_SUCCESS,
	payload: payload
});

export const failedTopAnime = payload => ({
	type: types.TOPANIME_FAILURE,
	payload: payload
});

import * as types from "./types";

export const requestSearchAnime = payload => ({

type: types.SEARCH_REQUEST,

payload: payload

});

export const fulfilledSearchAnime = payload => ({

type: types.SEARCH_SUCCESS,

payload: payload

});

export const failedSearchAnime = payload => ({

type: types.SEARCH_FAILURE,

payload: payload

});

export const requestTopAnime = payload => ({

type: types.TOPANIME_REQUEST,

payload: payload

});

export const fulfilledTopAnime = payload => ({

type: types.TOPANIME_SUCCESS,

payload: payload

});

export const failedTopAnime = payload => ({

type: types.TOPANIME_FAILURE,

payload: payload

});

This file contains our action creators that returns plain JavaScript objects.

Reducer.js

import { combineReducers } from "redux";

import * as types from "./types";

export const initialState = {};

const searchResults = (state = [], { type, payload }) => {
	switch (type) {
		case types.SEARCH_SUCCESS:
			return [...payload];
		case types.SEARCH_FAILURE:
			return state;
		default:
			return state;
	}
};

const topAnimes = (state = [], { type, payload }) => {
	switch (type) {
		case types.TOPANIME_SUCCESS:
			return [...payload];
		case types.TOPANIME_FAILURE:
			return state;

		default:
			return state;
	}
};

// State Selectors
export const getSearchResults = state => state.searchResults;
export const getTopAnimesResults = state => state.topAnimes;

export const animeReducer = combineReducers({
	searchResults,
	topAnimes
});

import { combineReducers } from "redux";

import * as types from "./types";

export const initialState = {};

const searchResults = (state = [], { type, payload }) => {

switch (type) {

case types.SEARCH_SUCCESS:

return [...payload];

case types.SEARCH_FAILURE:

return state;

default:

return state;

}

};

const topAnimes = (state = [], { type, payload }) => {

switch (type) {

case types.TOPANIME_SUCCESS:

return [...payload];

case types.TOPANIME_FAILURE:

return state;

default:

return state;

}

};

// State Selectors

export const getSearchResults = state => state.searchResults;

export const getTopAnimesResults = state => state.topAnimes;

export const animeReducer = combineReducers({

searchResults,

topAnimes

});

The reducer.js file contains two reducer:

searchResults: This is where the state of the search results is managed
loadingSearchResults: This is used to manage the loading state of the top airing animes.

Api.js

import axios from "axios";
import { baseURL } from "./constants";

export async function fetchTopAnimes() {
	return axios.get(`${baseURL}/top/anime/1/airing`);
}

export async function fetchAllAnimes(query) {
	if (query) {
		return axios.get(`${baseURL}/search/anime/?q=${query}&page=1`);
	} else {
		return axios.get(`${baseURL}/search/anime/?order_by=score&page=1`);
	}
}

import axios from "axios";

import { baseURL } from "./constants";

export async function fetchTopAnimes() {

return axios.get(`${baseURL}/top/anime/1/airing`);

}

export async function fetchAllAnimes(query) {

if (query) {

return axios.get(`${baseURL}/search/anime/?q=${query}&page=1`);

} else {

return axios.get(`${baseURL}/search/anime/?order_by=score&page=1`);

}

The file contains two functions that return promises.

fetchTopAnimes: This function makes an API call to get the top airing animes and then returns a promise.
fetchAllAnimes: This function makes an API call to get the results of the search query if there is a query, or it gets the best animes of all time if there is no query string. It also returns a promise.

saga.js

import { call, put, takeEvery, all } from "redux-saga/effects";
import { fetchTopAnimes, fetchAllAnimes } from "../Api";
import { SEARCH_REQUEST, TOPANIME_REQUEST } from "./types";
import {
	fulfilledTopAnime,
	failedTopAnime,
	fulfilledSearchAnime,
	failedSearchAnime
} from "./actions";

function* getTopAnimesWorker(action) {
	try {
		const data = yield call(fetchTopAnimes);
		let res = data.data.top;
		yield put(fulfilledTopAnime(res));
	} catch (err) {
		yield put(failedTopAnime(err));
	}
}
function* getSearchAnimesWorker(action) {
	try {
		const data = yield call(fetchAllAnimes, action.payload);
		let res = data.data.results;
		yield put(fulfilledSearchAnime(res));
	} catch (err) {
		yield put(failedSearchAnime(err));
	}
}

function* getTopAnimeWatcher() {
	yield takeEvery(TOPANIME_REQUEST, getTopAnimesWorker);
}

function* getSearchAnimesWatcher() {
	yield takeEvery(SEARCH_REQUEST, getSearchAnimesWorker);
}

export default function* rootSaga() {
	yield all([getTopAnimeWatcher(), getSearchAnimesWatcher()]);
}

import { call, put, takeEvery, all } from "redux-saga/effects";

import { fetchTopAnimes, fetchAllAnimes } from "../Api";

import { SEARCH_REQUEST, TOPANIME_REQUEST } from "./types";

import {

fulfilledTopAnime,

failedTopAnime,

fulfilledSearchAnime,

failedSearchAnime

} from "./actions";

function* getTopAnimesWorker(action) {

try {

const data = yield call(fetchTopAnimes);

let res = data.data.top;

yield put(fulfilledTopAnime(res));

} catch (err) {

yield put(failedTopAnime(err));

}

function* getSearchAnimesWorker(action) {

try {

const data = yield call(fetchAllAnimes, action.payload);

let res = data.data.results;

yield put(fulfilledSearchAnime(res));

} catch (err) {

yield put(failedSearchAnime(err));

}

function* getTopAnimeWatcher() {

yield takeEvery(TOPANIME_REQUEST, getTopAnimesWorker);

}

function* getSearchAnimesWatcher() {

yield takeEvery(SEARCH_REQUEST, getSearchAnimesWorker);

}

export default function* rootSaga() {

yield all([getTopAnimeWatcher(), getSearchAnimesWatcher()]);

}

This is the file where all the async calls/side-effects are being handled. In redux-thunk the async logic is put in the action creators, but in redux-saga, we have a dedicated file for this usually called sagas.

The saga file is usually structured in a way that we have two types of generator functions(sagas):

Worker Function
Watcher Function

The Watcher function waits/watches for a specific action to be dispatched to the redux store, then it calls the respective worker function which handles the side-effects/API calls

The two watcher functions are:

getTopAnimeWatcher
getSearchAnimesWatcher

The getTopAnimeWatcher yields an effect called takeEvery(), which takes an action and a function as arguments. takeEvery is a redux-saga helper effect that tells redux-saga to continuously and concurrently wait for an action of type TOPANIME_REQUEST to be dispatched, immediately it is dispatched, it should execute the getTopAnimesWorker function which handles the side-effects. We have another similar helper effects to takeEvery that can be used to listen for actions dispatched called takeLatest.

takeLatest calls its worker saga every time an action’s dispatched and it automatically cancels any previous execution of the worker saga if it is still running, while takeEvery does not cancel any previous saga.

The getSearchAnimesWatcher is similar to the getTopAnimeWatcher. When an action of type SEARCH_REQUEST is dispatched, it calls the getSearchAnimesWorker function.

We now know that the watcher functions call the worker functions, so what happens in them?

In the getTopAnimesWorker function, it first yields a function call that takes the fetchTopAnimes function we exported from the Api.js file.

call is another helper effects provided by redux-saga, it is used to execute/call a function but if that function is a promise it pauses the saga until the promises are resolved. The call effect is like await in async-await syntax.

const data = yield call(fetchTopAnimes);

1	const data = yield call(fetchTopAnimes);

So what the line above does is call the fetchTopAnimes async function, wait for it to be resolved, then the response is saved in the data variable. if the promise failed then it is caught in the catch block of the try-catch.

if the promise was successful execution of the saga resumes to the next line:

yield put(fulfilledTopAnime(res));

1	yield put(fulfilledTopAnime(res));

put is another helper effect which is used to dispatch an action to the redux store. The line above dispatches a fulfilledTopAnime() action with the response as an argument, so the reducer can update the store state.

If the promise failed then execution continues in the catch block

catch(e){
   yield put(failedTopAnime(err));
}

catch(e){

yield put(failedTopAnime(err));

}

This dispatches an action to the store to indicate the request failed.

getSearchAnimesWorker is similar to the getTopAnimesWorker function, the only difference is that the call effect takes a second argument.

const data = yield call(fetchAllAnimes, action.payload);

1	const data = yield call(fetchAllAnimes, action.payload);

This second argument makes it possible to pass an argument to the fetchAllAnimes function, so it looks something like this when it is called

call(fetchAllAnimes(action.payload));

1	call(fetchAllAnimes(action.payload));

Apart from that, everything else is the same as the getTopAnimesWorker we talked about earlier.

Finally, there is one more function in the saga file we have not discussed yet; the rootSaga generator function. This function uses another helper effect all. This effect tells redux-saga to run the functions in parallel.

The rootSaga function runs the two watcher sagas in parallel, so it can be exported and ran by the saga middleware. Basically, it connects the sagas to the redux-saga middleware

sagaMiddleware.run(rootSaga);

1	sagaMiddleware.run(rootSaga);

Above is a line of code in the store.js file that runs the saga.

This is just a trivial example to show you how to use redux-saga, but it is obvious there are benefits of using it instead of redux-thunk.

Some benefits of using Redux-saga:

Easier to test because we don’t have to mock API calls
Looks cleaner because we don’t have to deal with callbacks and asynchronous tasks are achieved in a synchronous nature.

Conclusion

Redux-saga might be an overkill for the trivial example, but it thrives when you need to handle complex asynchronous tasks in Redux. Personally, I use redux-saga for most of my Redux-based projects, because it looks a lot cleaner and easier to understand than the promise-based redux-thunk.

Github: https://github.com/nero2009/Anime-viewer

Here is an illustration of the flow:

Flow with sagas

References

About the author

Adaware Oghenero

Registered 16-09-2019 | Last seen 2 months ago 22

4 Comments | 6 Publications

Top developers

Bryan C. Full-stack JavaScript developer
Angular CSSJS Node.js Show lessAll skills
Milan M. Full Stack Javascript Developer
Angular Node.jsJS Show lessAll skills
Dragos S. Full Stack Developer
JS AngularNode.js Show lessAll skills
Tedi C. Full-stack React/PHP developer
JS ReactCSS PHP Node.js Show lessAll skills

Javed Baloch

15.03.2024

JAMstack Architecture with Next.js

The Jamstack architecture, a term coined by Mathias Biilmann, the co-founder of Netlify, encompasses a set of structural practices that rely on ...

JavaScript Next.js Programming React

Umoren Samuel

7.03.2024

Rendering Patterns: Static and Dynamic Rendering in Nextjs

Next.js is popular for its seamless support of static site generation (SSG) and server-side rendering (SSR), which offers developers the flexibility ...

JavaScript React

Handling Mutations and Data Fetching Using React Query

Daniel Agantem

12.09.2023

Handling Mutations and Data Fetching Using React Query

Utilizing React Query for data fetching is simple and effective. By removing the complexity of caching, background updates, and error handling, React ...

JavaScript React

1 comment

Nikita Bragin December 6, 2019 at 11:26 am

Try Redux Observables

Handling Side Effects in Redux: Redux-Saga

Redux-saga

What is a Generator function?

Demo Application

Folder Structure

index.js

store.js

App.js

AnimeList.js

TopAnimes.js

actions.js

Reducer.js

Api.js

saga.js

Conclusion

References

About the author

Vacancies

Top developers

Related articles

JAMstack Architecture with Next.js

Rendering Patterns: Static and Dynamic Rendering in Nextjs

Handling Mutations and Data Fetching Using React Query

1 comment

Categories

Password recovery

Handling Side Effects in Redux: Redux-Saga

Redux-saga

What is a Generator function?

Demo Application

Folder Structure

index.js

store.js

App.js

AnimeList.js

TopAnimes.js

actions.js

Reducer.js

Api.js

saga.js

Conclusion

References

About the author

Vacancies

Stay Informed

Stay Informed

Stay Informed

Top developers

Related articles

JAMstack Architecture with Next.js

Rendering Patterns: Static and Dynamic Rendering in Nextjs

Handling Mutations and Data Fetching Using React Query

1 comment

Categories

Sign in

Sign in \ Sign Up

Password recovery