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

在React + Redux应用程序中显示异步请求的加载微调器可以通过以下步骤实现：

首先，在React组件中引入所需的库和组件。例如，可以使用react-redux库中的connect函数来连接Redux store和React组件，以及使用react-loading-spinner组件来显示加载微调器。
在Redux store中定义一个用于管理异步请求状态的reducer。该reducer可以包含一个loading状态字段，用于表示异步请求是否正在进行中。
创建一个action creator函数，用于发起异步请求。在该函数中，可以先分发一个用于设置loading状态为true的action，然后执行异步请求，并在请求完成后再分发一个用于设置loading状态为false的action。
在React组件中，使用connect函数将Redux store中的loading状态映射到组件的props中。
在组件的render方法中，根据loading状态的值来决定是否显示加载微调器。可以使用条件渲染来实现这一点，例如使用三元表达式或if语句。

以下是一个示例代码：

// 引入所需的库和组件
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);

这样，当异步请求发起时，loading状态会被设置为true，加载微调器会显示出来；当请求完成后，loading状态会被设置为false，加载微调器会隐藏起来。