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.