使用React/redux发出干净的两个连续的axios请求

// 引入必要的库和组件
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import axios from 'axios';

// 定义Redux action类型和reducer
const SET_LOADING = 'SET_LOADING';
const SET_DATA = 'SET_DATA';

const initialState = {
  loading: false,
  data: null,
};

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

// 创建Redux store
const store = createStore(reducer);

// React组件
const MyComponent = () => {
  const dispatch = useDispatch();
  const { loading, data } = useSelector((state) => state);

  const fetchData = async () => {
    try {
      dispatch({ type: SET_LOADING, payload: true });

      // 发送第一个请求
      const response1 = await axios.get('https://api.example.com/endpoint1');
      const data1 = response1.data;

      // 更新状态
      dispatch({ type: SET_DATA, payload: data1 });

      // 发送第二个请求
      const response2 = await axios.get('https://api.example.com/endpoint2');
      const data2 = response2.data;

      // 更新状态
      dispatch({ type: SET_DATA, payload: data2 });

      dispatch({ type: SET_LOADING, payload: false });
    } catch (error) {
      console.error(error);
      dispatch({ type: SET_LOADING, payload: false });
    }
  };

  return (
    <div>
      {loading && <p>Loading...</p>}
      {data && <p>Data: {data}</p>}
      <button onClick={fetchData}>Fetch Data</button>
    </div>
  );
};

// 渲染React组件
ReactDOM.render(
  <Provider store={store}>
    <MyComponent />
  </Provider>,
  document.getElementById('root')
);