如何让带有useReducer的react组件在axios调用后重新渲染？

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

// 初始状态
const initialState = {
  data: null,
  loading: true,
  error: null,
};

// reducer函数
const reducer = (state, action) => {
  switch (action.type) {
    case 'FETCH_SUCCESS':
      return { ...state, loading: false, data: action.payload, error: null };
    case 'FETCH_ERROR':
      return { ...state, loading: false, data: null, error: action.payload };
    default:
      return state;
  }
};

const MyComponent = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  
  // useEffect监听数据变化
  useEffect(() => {
    fetchData();
  }, []);
  
  // 异步获取数据的函数
  const fetchData = async () => {
    try {
      const response = await axios.get('API_URL');
      dispatch({ type: 'FETCH_SUCCESS', payload: response.data });
    } catch (error) {
      dispatch({ type: 'FETCH_ERROR', payload: error.message });
    }
  };
  
  if (state.loading) {
    return <div>Loading...</div>;
  }

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

  return <div>Data: {state.data}</div>;
};

export default MyComponent;