Using `takeLatest` to Prevent Unnecessary API Calls

Provide an example of using the `takeLatest` effect in Redux-Saga for making API calls where only the result of the last call is of interest, thus cancelling any previous unfinished calls to optimize performance.

import { takeLatest, call, put } from 'redux-saga/effects';

Import necessary effects from Redux-Saga.

import { fetchDataApi } from './api';

Import the API call function.

function* fetchData(action) { try { const data = yield call(fetchDataApi, action.payload); yield put({type: 'FETCH_SUCCESS', data}); } catch (error) { yield put({type: 'FETCH_FAILURE', error}); } }

Define the fetchData generator function which makes an API call and handles success or failure.

function* watchFetchData() { yield takeLatest('FETCH_REQUEST', fetchData); }

Use takeLatest to automatically cancel any previous saga started if it's still running when a new FETCH_REQUEST action is dispatched.

export default watchFetchData;

Export the saga watcher.