User Authentication Flow in Redux Saga

Illustrate a user authentication flow using Redux Saga, focusing on how to handle login sequences with `takeLatest`, manage API calls, and handle success or failure.

import { takeLatest, call, put } from 'redux-saga/effects';
import { LOG_IN_REQUEST, LOG_IN_SUCCESS, LOG_IN_FAILURE } from './actionTypes';
import { loginApi } from './api';

// watcher saga
export function* watchLoginRequest() {
  yield takeLatest(LOG_IN_REQUEST, handleLogin);
}

This is the watcher saga that listens for the LOG_IN_REQUEST action. When this action is dispatched, it triggers the handleLogin worker saga.

// worker saga
function* handleLogin(action) {
  try {
    // call the login API with username and password
    const response = yield call(loginApi, action.payload.username, action.payload.password);
    // dispatch a success action to the store with the new user
    yield put({ type: LOG_IN_SUCCESS, user: response.user });
  } catch (error) {
    // dispatch a failure action to the store with the error
    yield put({ type: LOG_IN_FAILURE, error });
  }
}

This is the worker saga that performs the user login operation. It tries to call the login API with the provided credentials. On success, it dispatches a LOG_IN_SUCCESS action with the user details, and on failure, it dispatches a LOG_IN_FAILURE action with the error.

import { take, fork, cancel } from 'redux-saga/effects';
import { LOG_IN_SUCCESS, LOG_OUT } from './actionTypes';

function* logoutSaga() {
  while (true) {
    yield take(LOG_IN_SUCCESS);
    // fork the logout process
    const logoutFork = yield fork(handleLogout);
    yield take(LOG_OUT);
    // cancel the logout process
    yield cancel(logoutFork);
  }
}

This saga waits for the LOG_IN_SUCCESS action to fork a logout process. Then, it waits for the LOG_OUT action to cancel the logout process. This allows handling user logout flow.