如何使用thunk在react-redux钩子中进行异步调用？

npm install redux-thunk

import thunk from 'redux-thunk';

const middleware = [thunk];

export default middleware;

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from './thunk';

// 导入你的reducers
import rootReducer from './reducers';

// 创建Store并应用thunk中间件
const store = createStore(
  rootReducer,
  applyMiddleware(...thunkMiddleware)
);

export default store;

export const fetchData = () => {
  return (dispatch) => {
    dispatch(fetchDataRequest()); // 分发一个请求Action

    // 执行异步操作，例如发送网络请求
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        dispatch(fetchDataSuccess(data)); // 分发一个成功Action，并传递数据
      })
      .catch(error => {
        dispatch(fetchDataFailure(error)); // 分发一个失败Action，并传递错误信息
      });
  };
};

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

const DataComponent = () => {
  const dispatch = useDispatch();
  const data = useSelector(state => state.data);

  useEffect(() => {
    dispatch(fetchData()); // 在组件加载时分发异步Action
  }, [dispatch]);

  return (
    <div>
      {/* 渲染数据 */}
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

export default DataComponent;