Reactjs 多个axios get请求响应Redux

我有一个React-Redux应用程序，希望使用axios实现并发API GET请求。我将url作为参数传递给操作。我怎样才能做到呢？它是一个UI组件，在单击BU和单击BU时具有不同于API的数据

组件：

import React, { PropTypes, Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { getParallelData } from '../../actions/index';

class BUBGContainer extends Component {
  componentDidMount() {
    this.props.getParallelData('https://localhost:3001/reports/bu-list');
    this.props.getParallelData('https://localhost:3001/reports/bg-list');
  }

  updateTabs(i) {
    if (i === 1) {
      this.props.bgTab = true;
      this.props.buTab = false;
    } else {
      this.props.bgTab = false;
      this.props.buTab = true;
    }
  }


  render() {
    return (
      <div className="col-md-3">
        <label htmlFor="bu-bg-select">BU/BG:</label>
        <ul id="bu-bg-select-tabs" className="nav nav-tabs">
          <li role="presentation" className={ 'active' } onClick={ this.updateTabs(0) }><a>BU</a></li>
          <li role="presentation" className={ 'active' } onClick={ this.updateTabs(1) }><a>BG</a></li>
        </ul>
        <select name="bubgSelect" id="bu-bg-select" className="form-control">{_.map(this.props.items, (item, index) => <option key={ index }>{item}</option>)}</select>
        <p className="help-block">Hold <kbd>ctrl</kbd> and click to select multiple items</p>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  items: state.bubgFetching.data.rows,
});

const mapDispatchToProps = dispatch => bindActionCreators({ getParallelData }, dispatch);

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

我现在的减速机是

import _ from 'lodash';
import * as ACTION_TYPES from '../consts/action_types';

const initialState = {
  isLoading: false,
  data: [],
  error: false,
};

export const isFetchingGet = (state = initialState, action) => {
  const newState = _.cloneDeep(state);

  switch (action.type) {
    case ACTION_TYPES.RECV_GET_ERROR: {
      newState.isLoading = false;
      newState.data = action.data;
      newState.error = true;
      return newState;
    }

    case ACTION_TYPES.RECV_GET_DATA: {
      newState.isLoading = false;
      newState.data = action.data;
      newState.error = false;
      return newState;
    }

    case ACTION_TYPES.REQ_GET_DATA: {
      newState.isLoading = true;
      newState.error = false;
      return newState;
    }

    default:
      return state;
  }
};

---

这说明了如何使用它，但不确定如何实现它。

您应该尝试redux thunk或redux saga中间件。Thunk是更简单的选择

您还可以使用async/await，我发现它比承诺更具可读性

这就是交易。你将发送函数，redux thunk将自动为你做一些事情，而不是在动作生成器中发送对象

您可以这样做：

export const getParallelData = url => {
  return async dispatch => {
    const request = axios.get(url);
    try {
      if (response && response.ok) {
        await dispatch({
          type: ACTION_TYPES.REQ_GET_DATA,
          payload: request
        )}
      } catch(err) {
        await dispatch({
         type: ACTION_TYPES.REQ_GET_DATA,
         payload: err.toString()
        )}
      }
};

---

希望这有帮助

您应该尝试redux thunk或redux saga中间件。Thunk是更简单的选择

您还可以使用async/await，我发现它比承诺更具可读性

这就是交易。你将发送函数，redux thunk将自动为你做一些事情，而不是在动作生成器中发送对象

您可以这样做：

export const getParallelData = url => {
  return async dispatch => {
    const request = axios.get(url);
    try {
      if (response && response.ok) {
        await dispatch({
          type: ACTION_TYPES.REQ_GET_DATA,
          payload: request
        )}
      } catch(err) {
        await dispatch({
         type: ACTION_TYPES.REQ_GET_DATA,
         payload: err.toString()
        )}
      }
};

---

希望这有帮助

这里是一个有承诺的替代方案。所有这些都集中在您的并发请求问题上。只是相关部分：

componentDidMount() {
    const list = [ "bu-list, "bg-list" ];
    this.props.getParallelData( list );
}

export const getParallelData = list =>
    async ( dispatch ) => {
        dispatch( requestGetData() );
        try {
            const promiseArray = list.map( el =>
                 axios.get( `https://localhost:3001/reports/${ el }` ) );
            const response = await Promise.all( promiseArray );
            return dispatch( receiveGetData( response ) );
            // and map through response for data, or
            // const [ buList, bgList ] = await Promise.all( promiseArray );
            // return dispatch( receiveGetData( [ buList.data, bgList.data ] ) );
            // or whatever form you want to pass receiveGetData
        } catch ( error ) {
            return dispatch( receiveGetError( error ) );
        }
 };

---

这是一个有承诺的替代方案。所有这些都集中在您的并发请求问题上。只是相关部分：

componentDidMount() {
    const list = [ "bu-list, "bg-list" ];
    this.props.getParallelData( list );
}

export const getParallelData = list =>
    async ( dispatch ) => {
        dispatch( requestGetData() );
        try {
            const promiseArray = list.map( el =>
                 axios.get( `https://localhost:3001/reports/${ el }` ) );
            const response = await Promise.all( promiseArray );
            return dispatch( receiveGetData( response ) );
            // and map through response for data, or
            // const [ buList, bgList ] = await Promise.all( promiseArray );
            // return dispatch( receiveGetData( [ buList.data, bgList.data ] ) );
            // or whatever form you want to pass receiveGetData
        } catch ( error ) {
            return dispatch( receiveGetError( error ) );
        }
 };

---

运行webapp时会发生什么？您希望它有什么不同的功能？我不知道如何编写axios。所有这些都在我的操作中。我应该修改代码，仅在切换选项卡时触发api调用，还是应该在安装组件时提取api调用？运行webapp时会发生什么情况？您希望它有什么不同的功能？我不知道如何编写axios。所有这些都在我的操作中。我应该修改代码，仅在切换选项卡时触发api调用，还是在安装组件时提取api调用？我有thunk设置。我会试试这个，然后回来汇报。谢谢，我有thunk设置。我会试试这个，然后回来汇报。谢天谢地，他犯了一个错误。不变违反。是因为承诺吗？我还需要console.log响应，它返回未定义。我不知道您的应用程序的哪个部分会出现此错误，但我对我的答案进行了编辑，对获取数据做了更多的说明。您可以通过查看Promise.all方法来塑造代码。有一个axios.all方法，但因为有一个Promise.all，所以不需要它。同样，我的答案是关于使用axios执行并行请求。如果你想使用的话，也许你应该根据这个方法修改代码的其他部分。谢谢devserkan的帮助。抛出一个错误。不变违反。是因为承诺吗？我还需要console.log响应，它返回未定义。我不知道您的应用程序的哪个部分会出现此错误，但我对我的答案进行了编辑，对获取数据做了更多的说明。您可以通过查看Promise.all方法来塑造代码。有一个axios.all方法，但因为有一个Promise.all，所以不需要它。同样，我的答案是关于使用axios执行并行请求。如果你想使用的话，也许你应该根据这个方法修改代码的其他部分。谢谢devserkan的帮助。