How to manage race conditions in async actions using redux-saga

Question

Can you tell me How to manage race conditions in async actions using redux-saga?

Answer 1

To manage race conditions in async actions using redux-saga, use the race effect.

Syntax:

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

function* fetchDataSaga() {

  const { response, timeout } = yield race({

    response: call(fetchDataFromAPI),

    timeout: call(delay, 5000), // 5 seconds timeout

  });

  if (response) {

    yield put({ type: 'FETCH_SUCCESS', payload: response });

  } else {

    yield put({ type: 'FETCH_TIMEOUT' });

  }

}