State management in React applications can quickly become complex—especially when handling asynchronous logic like API calls, polling, timeouts, and background tasks. While Redux Thunk is great for simple logic, once your app grows, you’ll want something more structured and testable.

This is where Redux-Saga shines. It allows you to manage async flows using Generator functions, making your side effects:

✅ Predictable ✅ Testable ✅ Scalable ✅ Maintainable

In this blog, we’ll learn Redux-Saga step-by-step—from beginner concepts to advanced patterns.

🧱 What is Redux-Saga?

Redux-Saga is a middleware for Redux that uses ES6 Generators to handle side effects. The main idea is to write async code that looks synchronous.

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

Think of sagas as “background workers” that listen to Redux actions and react to them.

📦 Installation

npm install redux-saga

Setup Middleware

import createSagaMiddleware from "redux-saga";
import { configureStore } from "@reduxjs/toolkit";
import rootSaga from "./sagas";

const sagaMiddleware = createSagaMiddleware();

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefault) => getDefault().concat(sagaMiddleware),
});

sagaMiddleware.run(rootSaga);

export default store;

🐣 Beginner: Your First Saga

Let’s say you want to fetch Pokémon details.

Actions

export const fetchPokemonRequest = (name) => ({
  type: "FETCH_POKEMON_REQUEST",
  payload: name,
});
export const fetchPokemonSuccess = (data) => ({
  type: "FETCH_POKEMON_SUCCESS",
  payload: data,
});
export const fetchPokemonFailure = (error) => ({
  type: "FETCH_POKEMON_FAILURE",
  error,
});

Saga

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

function* fetchPokemonSaga(action) {
  try {
    const response = yield call(
      axios.get,
      `https://pokeapi.co/api/v2/pokemon/${action.payload}`
    );
    yield put(fetchPokemonSuccess(response.data));
  } catch (e) {
    yield put(fetchPokemonFailure(e.message));
  }
}

export default function* pokemonSaga() {
  yield takeEvery("FETCH_POKEMON_REQUEST", fetchPokemonSaga);
}

🎛 Understanding Key Effects

🚀 Intermediate: Auto-Refresh / Polling with Cancel

Imagine you want to auto refresh data every 10 seconds while a page is open.

Saga with race, delay, and take

import { call, put, delay, race, take, takeLatest } from "redux-saga/effects";
import axios from "axios";

function* autoRefreshPokemon(action) {
  try {
    while (true) {
      const response = yield call(
        axios.get,
        `https://pokeapi.co/api/v2/pokemon/${action.payload}`
      );
      yield put(fetchPokemonSuccess(response.data));

      // refresh every 10s
      yield delay(10000);
    }
  } finally {
    console.log("Stopped refreshing");
  }
}

function* watchAutoRefresh() {
  while (true) {
    const action = yield take("START_REFRESH");
    yield race([
      call(autoRefreshPokemon, action),
      take("STOP_REFRESH"), // stop when user leaves page
    ]);
  }
}

This pattern ensures:

✅ Continues refreshing ✅ Cancels when user leaves ✅ No memory leaks

🧠 Advanced Concepts

1. race — Competing Tasks

Useful for timeout logic:

const { response, timeout } = yield race({
  response: call(api.fetchData),
  timeout: delay(5000),
});

if (timeout) yield put(showError("Request Timeout"));

2. cancelled() — Cleanup when Saga Ends

import { cancelled } from "redux-saga/effects";

function* taskSaga() {
  try {
    yield call(longRunningTask);
  } finally {
    if (yield cancelled()) {
      console.log("Saga was cancelled, cleaning up…");
    }
  }
}

3. all() — Run Sagas in Parallel

import { all } from "redux-saga/effects";
import pokemonSaga from "./pokemonSaga";
import userSaga from "./userSaga";

export default function* rootSaga() {
  yield all([pokemonSaga(), userSaga()]);
}

✅ When to Use Redux-Saga

Use Saga if your app needs:

If your app just needs simple API calls → use Redux Thunk instead.

🏁 Conclusion

Redux-Saga may feel different at first because of generator functions—but once you understand the pattern, it becomes one of the cleanest and most powerful tools for managing complex async behavior.

You now know:

✅ How to create beginner-level sagas ✅ How to use effects (call, put, takeLatest, etc.) ✅ How to handle polling + cancel flows ✅ How to manage advanced race conditions and cleanup