异步操作未运行异步React Redux Thunk

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

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

// 正确的异步Action Creator示例
const fetchData = () => {
  return async (dispatch, getState) => {
    dispatch({ type: 'FETCH_DATA_REQUEST' });
    try {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
      dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
    } catch (error) {
      dispatch({ type: 'FETCH_DATA_FAILURE', error });
    }
  };
};

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

const MyComponent = () => {
  const dispatch = useDispatch();

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

  return <div>Loading...</div>;
};

const fetchData = () => {
  return async (dispatch, getState) => {
    console.log('Starting fetchData');
    dispatch({ type: 'FETCH_DATA_REQUEST' });
    try {
      const response = await fetch('https://api.example.com/data');
      console.log('Response received:', response);
      const data = await response.json();
      dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
    } catch (error) {
      console.error('Error fetching data:', error);
      dispatch({ type: 'FETCH_DATA_FAILURE', error });
    }
  };
};