Fetching Data with Redux Saga

Demonstrate how to use Redux Saga for fetching data from an API, using `call` to make the request and `put` to dispatch the result.
import { call, put, takeLatest } from 'redux-saga/effects';
import axios from 'axios';

// Action Types
Define Redux action types for handling API call states and import necessary functions from redux-saga and axios for making http requests.
// API call function
function fetchDataAPI() {
  return axios.get('')
    .then(response =>
    .catch(error => { throw error; });
Function to call the API using axios. On success, it returns the response data. In case of an error, it throws an error.
// Worker Saga
function* fetchDataSaga() {
  try {
    const data = yield call(fetchDataAPI);
    yield put({ type: FETCH_DATA_SUCCESS, data });
  } catch (error) {
    yield put({ type: FETCH_DATA_FAILURE, error });
The worker saga uses call to invoke fetchDataAPI. Upon successful API call, it dispatches FETCH_DATA_SUCCESS with data. In case of an error, it dispatches FETCH_DATA_FAILURE.
// Watcher Saga
function* watchFetchDataSaga() {
  yield takeLatest(FETCH_DATA_REQUEST, fetchDataSaga);
Watcher saga that triggers worker saga on FETCH_DATA_REQUEST actions. Using takeLatest ensures that it only responds to the latest request if multiple are made in a short time.
import { all, fork } from 'redux-saga/effects';

// Root saga
export default function* rootSaga() {
  yield all([
    // Add other sagas here
Root saga to aggregate all sagas including the watcher saga for fetching data. Other sagas can be added similarly using fork within the all effect.