Basic Redux Saga effects cheatsheet

redux-saga

takeEvery

Use this when

You want to watch for EVERY time a specific redux action was dispatched.

Use case

Getting / fetching a list of data from an API.

Example

function* watchGetUsersRequest() {
  yield takeEvery(action.Types.GET_USERS_REQUEST, getUsers);
}

takeLatest

Use this when

Creating or updating a record, or there’s the potential for a redux action to be dispatched multiple times in a short period and could potentially initiate the running of multiple instances of the same saga.

Use takeLatest to ONLY take the latest currently running saga for the associated dispatched redux action.

Use case

If you have a complex app that queries the same API endpoint from multiple components at the same time - for example if you have a navbar that displays the currently logged in user’s name, but the user is viewing a ‘settings’ page to view their personal details meaning both the navbar and the settings page will query the same API endpoint - you’ll generally want to take the latest call for that data.

Example

function* watchGetLoggedInUserRequest() {
  yield takeLatest(action.Types.GET_LOGGED_IN_USER_REQUEST, getLoggedInUser);
}

Blocking saga with “take”

Use this when

You want to watch for a particular redux action to be dispatched, but you don’t want to listen for that same dispatched action again until the currently running saga for that action has complete. You’re “blocking” the ability to watch for when that particular redux action is dispatched until the currently running saga for that redux action has complete.

Use case

Deleting a user, or accepting a payment. Generally you don’t want to be able to accept multiple, simultaneous payments - you’d want to wait for the current transaction to complete before allowing the ability to accept another payment.

Example

function* watchDeleteUserRequest() {
  while (true) {
    const { userId } = yield take(action.Types.DELETE_USER_REQUEST);
    yield call(deleteUser, { userId });
  }
}

call

Use this when

You want to call a function or a promise but want to wait for that function or promise to finish running before executing the next line of code.

Use case

In conjunction with “take” and blocking saga, or calling a promise within a worker saga that queries an API endpoint.

Example

function* deleteUser({ userId }) {
  try {
    const result = yield call(api.deleteUser, userId);
  } catch (e) {}
}
function* watchDeleteUserRequest() {
  while (true) {
    const { userId } = yield take(action.Types.DELETE_USER_REQUEST);
    yield call(deleteUser, { userId });
  }
}

< back to index