React Native中多Axios请求实现及Redux方案咨询

没问题！完全可以用Axios发起多个GET请求，不用非得依赖Redux——尤其是如果你的项目规模不大、状态逻辑不算复杂的话，直接在组件里管理状态就足够了。下面我给你分两种方案详细说明，你可以根据自己的需求选择：

这种方式适合数据只在当前组件（或少量子组件）使用的场景，实现起来更轻量化。

1. 状态管理调整 #

首先扩展你的组件状态，除了原本的toss，还要加上加载状态和错误状态，以及存储其他接口返回的数据：

state = {
  toss: [],
  data1: [], // 对应第一个额外接口的数据
  data2: [], // 对应第二个额外接口的数据
  // ... 继续添加其他6个接口对应的状态字段
  loading: false,
  error: null
};

2. 发起多个并行请求 #

在componentDidMount（类组件）或useEffect（函数组件）中，用Promise.all批量发起请求——这会让所有请求并行执行，比逐个发起更高效：

componentDidMount() {
  this.setState({ loading: true });
  
  // 把所有需要调用的GET请求存入数组
  const requestList = [
    axios.get('/api/your-firebase-url-1'),
    axios.get('/api/your-firebase-url-2'),
    axios.get('/api/your-firebase-url-3'),
    // ... 补上剩下的4个请求
  ];

  // 批量执行请求
  Promise.all(requestList)
    .then(responses => {
      // 每个response对应requestList中请求的返回结果，按顺序取值
      this.setState({
        toss: responses[0].data, // 假设你的toss对应第一个请求的数据
        data1: responses[1].data,
        data2: responses[2].data,
        // ... 赋值其他接口的数据
        loading: false,
        error: null
      });
    })
    .catch(err => {
      this.setState({
        loading: false,
        error: '数据加载失败，请稍后重试'
      });
      console.error('请求出错:', err);
    });
}

3. 响应与渲染处理 #

在render方法中根据状态渲染不同内容：

render() {
  const { loading, error, toss, data1 } = this.state;

  // 加载中状态
  if (loading) return <div>正在加载数据...</div>;
  
  // 错误状态
  if (error) return <div className="error">{error}</div>;

  // 成功加载后渲染数据
  return (
    <div className="data-container">
      <h3>Toss 数据:</h3>
      {toss.map(item => <div key={item.id}>{item.content}</div>)}

      <h3>其他数据1:</h3>
      {data1.map(item => <div key={item.id}>{item.content}</div>)}

      {/* ... 渲染其他接口的数据 */}
    </div>
  );
}

如果是函数组件，逻辑类似，只是用useState和useEffect替代类组件的状态和生命周期：

import { useState, useEffect } from 'react';
import axios from 'axios';

function DataComponent() {
  const [state, setState] = useState({
    toss: [],
    data1: [],
    loading: true,
    error: null
  });

  useEffect(() => {
    const fetchAllData = async () => {
      try {
        const responses = await Promise.all([
          axios.get('/api/url1'),
          axios.get('/api/url2')
          // ... 其他请求
        ]);
        setState({
          toss: responses[0].data,
          data1: responses[1].data,
          loading: false,
          error: null
        });
      } catch (err) {
        setState({
          ...state,
          loading: false,
          error: '加载失败'
        });
      }
    };
    fetchAllData();
  }, []);

  // 渲染逻辑和类组件一致
}

如果你的数据需要在多个组件中使用，或者状态逻辑比较复杂，Redux会让状态管理更清晰。

1. 基础配置 #

先安装依赖：

npm install redux react-redux redux-thunk

创建Redux Store：

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

const rootReducer = combineReducers({
  data: dataReducer
});

export const store = createStore(rootReducer, applyMiddleware(thunk));

2. 创建Action（处理异步请求） #

定义发起请求、成功、失败的action类型和异步action：

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

export const FETCH_DATA_REQUEST = 'FETCH_DATA_REQUEST';
export const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS';
export const FETCH_DATA_FAILURE = 'FETCH_DATA_FAILURE';

export const fetchAllData = () => {
  return async (dispatch) => {
    dispatch({ type: FETCH_DATA_REQUEST });
    try {
      const responses = await Promise.all([
        axios.get('/api/url1'),
        axios.get('/api/url2'),
        // ... 其他请求
      ]);
      dispatch({
        type: FETCH_DATA_SUCCESS,
        payload: {
          toss: responses[0].data,
          data1: responses[1].data,
          // ... 其他数据
        }
      });
    } catch (err) {
      dispatch({
        type: FETCH_DATA_FAILURE,
        payload: err.message
      });
    }
  };
};

3. 创建Reducer（处理状态更新） #

编写reducer来处理不同action对应的状态变化：

// reducers/dataReducer.js
import { FETCH_DATA_REQUEST, FETCH_DATA_SUCCESS, FETCH_DATA_FAILURE } from '../actions/dataActions';

const initialState = {
  toss: [],
  data1: [],
  loading: false,
  error: null
};

const dataReducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_DATA_REQUEST:
      return { ...state, loading: true, error: null };
    case FETCH_DATA_SUCCESS:
      return { ...state, ...action.payload, loading: false };
    case FETCH_DATA_FAILURE:
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
};

export default dataReducer;

4. 在组件中使用Redux #

类组件用connect连接Redux，函数组件用useSelector和useDispatch：

// 类组件示例
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchAllData } from './actions/dataActions';

class DataComponent extends Component {
  componentDidMount() {
    this.props.fetchAllData();
  }

  render() {
    const { loading, error, toss, data1 } = this.props;
    if (loading) return <div>加载中...</div>;
    if (error) return <div>{error}</div>;
    return (
      <div>
        {/* 渲染数据 */}
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  toss: state.data.toss,
  data1: state.data.data1,
  loading: state.data.loading,
  error: state.data.error
});

export default connect(mapStateToProps, { fetchAllData })(DataComponent);

最后别忘了在项目入口文件（比如index.js）用Provider包裹组件，注入Store：

import { Provider } from 'react-redux';
import { store } from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

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