如何配置多个API请求的redux reducer？

import { createStore, combineReducers } from 'redux';
import reducer1 from './reducer1';
import reducer2 from './reducer2';

const rootReducer = combineReducers({
  reducer1,
  reducer2,
});

const store = createStore(rootReducer);

// reducer1.js
const initialState = {
  data: [],
  loading: false,
  error: null,
};

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

export default reducer1;

// reducer2.js
const initialState = {
  data: {},
  loading: false,
  error: null,
};

const reducer2 = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_DETAILS_REQUEST':
      return {
        ...state,
        loading: true,
        error: null,
      };
    case 'FETCH_DETAILS_SUCCESS':
      return {
        ...state,
        loading: false,
        data: action.payload,
      };
    case 'FETCH_DETAILS_FAILURE':
      return {
        ...state,
        loading: false,
        error: action.payload,
      };
    default:
      return state;
  }
};

export default reducer2;

import axios from 'axios';

const fetchData = () => {
  return (dispatch) => {
    dispatch({ type: 'FETCH_DATA_REQUEST' });

    axios.get('/api/data')
      .then((response) => {
        dispatch({ type: 'FETCH_DATA_SUCCESS', payload: response.data });
      })
      .catch((error) => {
        dispatch({ type: 'FETCH_DATA_FAILURE', payload: error.message });
      });
  };
};

const fetchDetails = () => {
  return (dispatch) => {
    dispatch({ type: 'FETCH_DETAILS_REQUEST' });

    axios.get('/api/details')
      .then((response) => {
        dispatch({ type: 'FETCH_DETAILS_SUCCESS', payload: response.data });
      })
      .catch((error) => {
        dispatch({ type: 'FETCH_DETAILS_FAILURE', payload: error.message });
      });
  };
};

import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { fetchData, fetchDetails } from './actions';

const MyComponent = ({ data, loading, error, fetchData, fetchDetails }) => {
  useEffect(() => {
    fetchData();
    fetchDetails();
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <div>
      <h1>Data: {data}</h1>
    </div>
  );
};

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

export default connect(mapStateToProps, { fetchData, fetchDetails })(MyComponent);