如何创建redux操作成功和错误回调来触发react组件处理程序？

// 1. 引入Redux和React-Redux库
import { createStore, applyMiddleware } from 'redux';
import { Provider, connect } from 'react-redux';
import thunk from 'redux-thunk';

// 2. 创建Redux的action
const fetchData = () => {
  return async (dispatch) => {
    try {
      // 发起异步请求
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();

      // 分发成功的action
      dispatch(fetchSuccess(data));
    } catch (error) {
      // 分发错误的action
      dispatch(fetchError(error.message));
    }
  };
};

// 3. 创建成功和错误的action
const fetchSuccess = (data) => {
  return {
    type: 'FETCH_SUCCESS',
    payload: data
  };
};

const fetchError = (error) => {
  return {
    type: 'FETCH_ERROR',
    payload: error
  };
};

// 4. 在React组件中使用Redux的状态和action
const MyComponent = ({ data, fetchData }) => {
  return (
    <div>
      <button onClick={fetchData}>Fetch Data</button>
      {data && <p>{data}</p>}
    </div>
  );
};

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

const mapDispatchToProps = (dispatch) => {
  return {
    fetchData: () => dispatch(fetchData())
  };
};

const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(MyComponent);

// 5. 创建Redux store并将组件包装在Provider中
const store = createStore(reducer, applyMiddleware(thunk));

const App = () => {
  return (
    <Provider store={store}>
      <ConnectedComponent />
    </Provider>
  );
};