Blog>
Snippets

Debouncing API Calls

Provides an example of using 'debounce' effect in Redux-Saga to delay the saga task until a certain amount of time has passed without any further action being dispatched.
import { debounce, put, call } from 'redux-saga/effects';

function* fetchUserData(action) {
  // Mock API call
  const data = yield call(Api.fetchUser, action.payload.userId);
  yield put({ type: 'USER_DATA_RECEIVED', data });
}
This piece of code defines a saga worker (fetchUserData) which simulates fetching user data from an API.
import { takeLatest } from 'redux-saga/effects';

function* watchUserFetchRequest() {
  // Utilizes debounce effect with a 500ms wait time before proceeding
  yield debounce(500, 'FETCH_USER_REQUEST', fetchUserData);
}
This saga watcher uses the 'debounce' effect to wait for 500ms without any new 'FETCH_USER_REQUEST' action before calling fetchUserData saga. It helps in avoiding multiple successive calls if the action is dispatched multiple times in a short period.