在Redux中通过回调分派操作

const fetchData = (callback) => {
  return (dispatch) => {
    // 异步操作开始前，可以先分派一个同步的action
    dispatch({ type: 'FETCH_DATA_START' });

    // 执行异步操作，例如发送网络请求
    fetch('https://api.example.com/data')
      .then((response) => response.json())
      .then((data) => {
        // 异步操作成功后，分派一个同步的action，并将数据传递给reducer
        dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });

        // 执行回调函数，传递数据给回调函数
        callback(data);
      })
      .catch((error) => {
        // 异步操作失败后，分派一个同步的action，并将错误信息传递给reducer
        dispatch({ type: 'FETCH_DATA_FAILURE', payload: error });
      });
  };
};

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

class MyComponent extends React.Component {
  componentDidMount() {
    // 调用异步操作的action creator，并传递一个回调函数
    this.props.fetchData((data) => {
      // 在回调函数中处理数据
      console.log(data);
    });
  }

  render() {
    // 组件的渲染逻辑
    return <div>My Component</div>;
  }
}

const mapDispatchToProps = {
  fetchData,
};

export default connect(null, mapDispatchToProps)(MyComponent);