Redux saga: takeLatest vs takeEvery.

A use case we must understand for using takeLatest vs takeEvery in our react js product using redux-saga.

So if you have your Reactjs application and want to integrate it with react saga, then it is a must that you are aware of the two methods provided by React saga library i.e. takeLatest and takeEvery.

If in case you want to understand how we can set up redux-saga you can follow along with the following tutorial.

Redux Saga Tutorial Links:

• Redux Saga Tutorial | React JS, its setup. Creating class-based vs functional components. | Part 1

• Redux Saga Tutorial | Hooks Vs Lifecycle method in React components. | Part 2

• Redux Saga Tutorial | Redux setup in react React components. | Part 3

• Redux Saga Tutorial | Implement redux-saga with ReactJS and Redux.| Part 4

It is best that we try to understand the difference between both of them so that things make much more sense.

The most basic definition of takeLatest and takeEvery is that as the name suggests takeLatest always takes the latest action dispatched vs takeEvery triggers the action every time it received the input.

Here you can find the Github code for the sample project which we will be discussing.

Github Link: https://github.com/apoorvtomar2222/redux-saga-tutorial

Let's start with takeLatest example.

So here we have dispatched updateTitle method from our component lifecycle method componentDidMount. For now we have dispatched same function with two different payloads i.e. This is from class based component. and This is from class based component 1.

// Class based component

import React, { Component } from "react";
import { connect } from 'react-redux';
import { updateTitle } from '../action';

class ClassBasedComponent extends Component {
    constructor() {
        super();
        this.state = {
            name: "This is class"
        };
    }

    componentDidMount() {
        this.props.updateTitle("This is from class based component.")
            this.props.updateTitle("This is from class based component 1.")
    }

    render() {
        const { title } = this.props;
        return (
            <>
                {title}
            </>
        )
    }
}

const mapDispatchToProps = {
    updateTitle
}

const mapStateToProps = function (state) {
    return {
        title: state.home.title,
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(ClassBasedComponent);

takeLatest

In our saga js file, we have caught the action by using takeLatest method. This will help in calling the function only once and older actions would be cancelled.

Any API call or business logic written in the updateTitle method would be called only once. This is mainly done when our use case is to call the API or do some action based upon the used last action.

// Saga js file. 
// saga/index.js

import {
    call,
    put,
    takeEvery,
    takeLatest
} from 'redux-saga/effects'
import { UPDATE_TITLE, UPDATE_TITLE_FROM_SAGA } from '../constants';

// worker Saga: will be fired on USER_FETCH_REQUESTED actions
function* updateTitle(action) {
    try {
        yield put({ type: UPDATE_TITLE_FROM_SAGA, payload: `${action.payload}-Sagas` });
    } catch (e) {
        console.log(e);
    }
}

function* mySaga() {
    yield takeLatest(UPDATE_TITLE, updateTitle);
}

export default mySaga;

takeEvery

Here we have replaced the takeLatest with takeEvery which will only lead to triggering the updateTitle function with every payload.

Any business logic written inside the updateTitle function will be triggered couple of times.

The takeEvery is generally taken whenever we want to perform any API call which require to log the data for any user action or similar use case.

// Saga js file. 
// saga/index.js

import {
    call,
    put,
    takeEvery,
    takeLatest
} from 'redux-saga/effects'
import { UPDATE_TITLE, UPDATE_TITLE_FROM_SAGA } from '../constants';

// worker Saga: will be fired on USER_FETCH_REQUESTED actions
function* updateTitle(action) {
    try {
        yield put({ type: UPDATE_TITLE_FROM_SAGA, payload: `${action.payload}-Sagas` });
    } catch (e) {
        console.log(e);
    }
}

function* mySaga() {
    yield takeEvery(UPDATE_TITLE, updateTitle);
}

export default mySaga;

So this is mainly the difference between the takeLatest and takeEvery in redux-saga, this help in solving different use cases. But this is needed so having an understanding of both will help.

---

About The Author

Apoorv Tomar is a Software developer and part of Mindroast. You can connect with him on Twitter, Linkedin, Telegram and Instagram. Subscribe to the newsletter for the latest curated content. Don’t hesitate to say ‘Hi’ on any platform, just stating a reference of where did you find my profile.