如何在允许重复的情况下使用useReducer和useEffect从API获取

import React, { useEffect, useReducer } from 'react';
import axios from 'axios';

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

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

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

  try {
    const response = await axios.get('https://api.example.com/data');
    dispatch({ type: 'FETCH_DATA_SUCCESS', payload: response.data });
  } catch (error) {
    dispatch({ type: 'FETCH_DATA_FAILURE', payload: error.message });
  }
};

const ExampleComponent = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  useEffect(() => {
    fetchData(dispatch);
  }, []);

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

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

  return (
    <div>
      {/* Render the fetched data */}
      {state.data && <div>{state.data}</div>}
    </div>
  );
};

export default ExampleComponent;