在redux-saga应用中实现加载指示器的最佳方式是什么？

import { takeEvery, put } from 'redux-saga/effects';
import { showLoadingIndicator, hideLoadingIndicator } from './actions';

function* showLoadingIndicatorSaga() {
  yield put(showLoadingIndicator());
}

function* hideLoadingIndicatorSaga() {
  yield put(hideLoadingIndicator());
}

function* loadingIndicatorSaga() {
  yield takeEvery('START_LOADING', showLoadingIndicatorSaga);
  yield takeEvery('STOP_LOADING', hideLoadingIndicatorSaga);
}

export default loadingIndicatorSaga;

import { all } from 'redux-saga/effects';
import loadingIndicatorSaga from './loadingIndicatorSaga';

function* rootSaga() {
  yield all([
    // 其他的sagas
    loadingIndicatorSaga(),
  ]);
}

export default rootSaga;

// actions.js
export const showLoadingIndicator = () => ({
  type: 'SHOW_LOADING_INDICATOR',
});

export const hideLoadingIndicator = () => ({
  type: 'HIDE_LOADING_INDICATOR',
});

// reducer.js
const initialState = {
  isLoading: false,
};

const loadingIndicatorReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SHOW_LOADING_INDICATOR':
      return {
        ...state,
        isLoading: true,
      };
    case 'HIDE_LOADING_INDICATOR':
      return {
        ...state,
        isLoading: false,
      };
    default:
      return state;
  }
};

export default loadingIndicatorReducer;

import React from 'react';
import { connect } from 'react-redux';
import { startLoading, stopLoading } from './actions';

const MyComponent = ({ isLoading, startLoading, stopLoading }) => {
  // 根据isLoading状态显示或隐藏加载指示器
  return (
    <div>
      {isLoading && <div>Loading...</div>}
      <button onClick={startLoading}>Start Loading</button>
      <button onClick={stopLoading}>Stop Loading</button>
    </div>
  );
};

const mapStateToProps = (state) => ({
  isLoading: state.loadingIndicator.isLoading,
});

const mapDispatchToProps = {
  startLoading,
  stopLoading,
};

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);