Implementing Basic Throttle in Redux-Saga

Showcase a simple code example of how to implement the throttle effect in a Redux-Saga to rate-limit an action-triggered saga.

import { throttle } from 'redux-saga/effects';

Import the throttle effect from redux-saga/effects.

import { fetchData } from './api'; // The API call function

Import a mock function that represents an API call.

import { REQUEST_DATA, DATA_LOADED, LOAD_ERROR } from './actionTypes'; // Define action types

Import action types for requesting, successfully loading, and loading error.

function* fetchDataSaga(action) {
  try {
    const data = yield call(fetchData, action.payload);
    yield put({ type: DATA_LOADED, payload: data });
  } catch (error) {
    yield put({ type: LOAD_ERROR, payload: error.message });
  }
}

Define a generator function saga that handles data fetching, which will be called by the throttle effect.

function* watchFetchDataSaga() {
  yield throttle(500, REQUEST_DATA, fetchDataSaga);
}

Define a watcher saga that uses the throttle effect to control how often fetchDataSaga can be called. It limits the saga to be called at most once every 500 milliseconds in response to REQUEST_DATA actions.