如何在React + Redux应用程序中显示异步请求的加载微调器？

// 引入所需的库和组件
import React from 'react';
import { connect } from 'react-redux';
import LoadingSpinner from 'react-loading-spinner';

// 定义reducer
const initialState = {
  loading: false
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_LOADING':
      return {
        ...state,
        loading: action.payload
      };
    default:
      return state;
  }
};

// 创建action creator
const setLoading = (isLoading) => ({
  type: 'SET_LOADING',
  payload: isLoading
});

// React组件
class MyComponent extends React.Component {
  componentDidMount() {
    // 发起异步请求
    this.props.setLoading(true);

    // 执行异步请求
    // ...

    // 请求完成后设置loading状态为false
    this.props.setLoading(false);
  }

  render() {
    return (
      <div>
        {this.props.loading ? <LoadingSpinner /> : null}
        {/* 其他组件内容 */}
      </div>
    );
  }
}

// 将loading状态映射到组件的props中
const mapStateToProps = (state) => ({
  loading: state.loading
});

// 连接Redux store和React组件
export default connect(mapStateToProps, { setLoading })(MyComponent);