如何处理使用redux saga显示加载器的动态请求情况？

import { put, call, takeEvery } from 'redux-saga/effects';
import axios from 'axios';

// Action Types
const FETCH_DATA = 'FETCH_DATA';
const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS';
const FETCH_DATA_FAILURE = 'FETCH_DATA_FAILURE';
const SHOW_LOADER = 'SHOW_LOADER';
const HIDE_LOADER = 'HIDE_LOADER';

// Action Creators
const fetchData = () => ({ type: FETCH_DATA });
const fetchDataSuccess = (data) => ({ type: FETCH_DATA_SUCCESS, payload: data });
const fetchDataFailure = (error) => ({ type: FETCH_DATA_FAILURE, payload: error });
const showLoader = () => ({ type: SHOW_LOADER });
const hideLoader = () => ({ type: HIDE_LOADER });

// Reducer
const initialState = {
  data: null,
  isLoading: false,
  error: null
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_DATA:
      return { ...state, isLoading: true };
    case FETCH_DATA_SUCCESS:
      return { ...state, isLoading: false, data: action.payload };
    case FETCH_DATA_FAILURE:
      return { ...state, isLoading: false, error: action.payload };
    case SHOW_LOADER:
      return { ...state, isLoading: true };
    case HIDE_LOADER:
      return { ...state, isLoading: false };
    default:
      return state;
  }
};

// Saga
function* fetchDataSaga() {
  try {
    yield put(showLoader()); // 显示加载器

    // 发起动态请求
    const response = yield call(axios.get, '/api/data');

    yield put(fetchDataSuccess(response.data)); // 请求成功

    yield put(hideLoader()); // 隐藏加载器
  } catch (error) {
    yield put(fetchDataFailure(error.message)); // 请求失败

    yield put(hideLoader()); // 隐藏加载器
  }
}

function* rootSaga() {
  yield takeEvery(FETCH_DATA, fetchDataSaga);
}

// 导出根Reducer和根Saga
export { reducer, rootSaga };