React-Redux中如何用Axios实现带URL参数的并发GET请求？

没问题，我来帮你搞定React-Redux里用Axios发起并发GET请求的需求，结合你给出的组件结构，咱们一步步来实现：

首先得在action里处理异步并发逻辑，这里需要用到redux-thunk中间件（如果还没安装，先执行npm install redux-thunk axios），同时用Axios的axios.all方法来发起并行请求。

// actions/index.js
import axios from 'axios';

// 定义action类型常量
export const PARALLEL_DATA_REQUEST = 'PARALLEL_DATA_REQUEST';
export const PARALLEL_DATA_SUCCESS = 'PARALLEL_DATA_SUCCESS';
export const PARALLEL_DATA_FAILURE = 'PARALLEL_DATA_FAILURE';

// 核心异步action：接收URL数组作为参数
export const getParallelData = (urls) => async (dispatch) => {
  // 触发请求开始状态
  dispatch({ type: PARALLEL_DATA_REQUEST });
  try {
    // 把每个URL转换成Axios GET请求实例
    const requestList = urls.map(url => axios.get(url));
    // 等待所有请求完成
    const responses = await axios.all(requestList);
    // 提取每个请求的返回数据
    const resultData = responses.map(res => res.data);
    // 触发请求成功状态，传递数据
    dispatch({
      type: PARALLEL_DATA_SUCCESS,
      payload: resultData
    });
  } catch (error) {
    // 处理请求失败情况
    dispatch({
      type: PARALLEL_DATA_FAILURE,
      payload: error.message || '并发请求失败，请稍后重试'
    });
  }
};

接下来需要Reducer来处理这些action类型，维护页面的加载状态、数据和错误信息：

// reducers/dataReducer.js
import {
  PARALLEL_DATA_REQUEST,
  PARALLEL_DATA_SUCCESS,
  PARALLEL_DATA_FAILURE
} from '../actions/index';

// 初始状态
const initialState = {
  isLoading: false,
  parallelData: [],
  requestError: null
};

export default function dataReducer(state = initialState, action) {
  switch (action.type) {
    case PARALLEL_DATA_REQUEST:
      return { ...state, isLoading: true, requestError: null };
    case PARALLEL_DATA_SUCCESS:
      return { ...state, isLoading: false, parallelData: action.payload };
    case PARALLEL_DATA_FAILURE:
      return { ...state, isLoading: false, requestError: action.payload };
    default:
      return state;
  }
}

现在把组件和Redux连接起来，处理按钮点击事件，传入目标URL数组，并根据Redux状态渲染UI：

// components/BUBGContainer.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types'; // 注意：现在PropTypes需要单独导入这个包
import { getParallelData } from '../../actions/index';

class BUBGContainer extends Component {
  // 按钮点击触发并发请求
  handleBUButtonClick = () => {
    // 这里替换成你实际需要请求的URL列表
    const targetUrls = [
      'https://api.example.com/first-data',
      'https://api.example.com/second-data',
      'https://api.example.com/third-data'
    ];
    // 调用Redux action，传入URL数组
    this.props.getParallelData(targetUrls);
  };

  render() {
    const { isLoading, parallelData, requestError } = this.props;
    return (
      <div className="bu-container">
        <button onClick={this.handleBUButtonClick}>BU按钮</button>
        
        {/* 加载状态提示 */}
        {isLoading && <p className="loading-text">正在获取数据...</p>}
        
        {/* 错误提示 */}
        {requestError && <p className="error-text" style={{color: 'red'}}>{requestError}</p>}
        
        {/* 渲染获取到的并发数据 */}
        {parallelData.length > 0 && !isLoading && (
          <div className="data-container">
            <h4>并发请求结果：</h4>
            {parallelData.map((item, index) => (
              <div key={index} className="data-item">
                <p>第 {index+1} 组数据：{JSON.stringify(item)}</p>
              </div>
            ))}
          </div>
        )}
      </div>
    );
  }
}

// 定义组件属性类型校验
BUBGContainer.propTypes = {
  getParallelData: PropTypes.func.isRequired,
  isLoading: PropTypes.bool.isRequired,
  parallelData: PropTypes.array.isRequired,
  requestError: PropTypes.string
};

// 映射Redux状态到组件props
const mapStateToProps = (state) => ({
  isLoading: state.data.isLoading, // 这里的state.data对应你在Store中注册的reducer名称
  parallelData: state.data.parallelData,
  requestError: state.data.requestError
});

// 映射action到组件props
const mapDispatchToProps = {
  getParallelData
};

// 连接组件与Redux
export default connect(mapStateToProps, mapDispatchToProps)(BUBGContainer);

最后要在Store里配置thunk中间件，这样异步action才能正常工作：

// store/index.js
import { createStore, applyMiddleware, combineReducers } from 'redux';
import thunk from 'redux-thunk';
import dataReducer from '../reducers/dataReducer';

// 合并所有reducer（如果有多个的话）
const rootReducer = combineReducers({
  data: dataReducer
});

// 创建Store并应用thunk中间件
const store = createStore(rootReducer, applyMiddleware(thunk));

export default store;

• 并发请求的顺序：axios.all会按照你传入的URL数组顺序返回结果，不用担心顺序错乱
• 错误处理：只要有一个请求失败，整个axios.all会进入catch块，你可以根据需求调整为部分失败不影响整体的逻辑
• 组件状态管理：所有请求状态（加载、成功、失败）都交给Redux维护，组件只负责渲染和触发action

内容的提问来源于stack exchange，提问作者arunmmanoharan