如何通过redux-thunk使用通过挂钩传递的api数据

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

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

import axios from 'axios';

export const fetchData = () => {
  return async (dispatch) => {
    try {
      const response = await axios.get('https://api.example.com/data');
      dispatch({ type: 'FETCH_SUCCESS', payload: response.data });
    } catch (error) {
      dispatch({ type: 'FETCH_ERROR', payload: error.message });
    }
  };
};

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

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

  return (
    <div>
      {/* 渲染数据 */}
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    data: state.data,
  };
};

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