如何使用redux在操作之间添加依赖关系

npm install redux-thunk

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

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

// 定义fetchData操作
const fetchData = () => {
  return async (dispatch) => {
    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', payload: error.message });
    }
  };
};

// 定义processData操作，依赖于fetchData的结果
const processData = () => {
  return async (dispatch, getState) => {
    const { data } = getState(); // 获取fetchData的结果
    // 处理数据逻辑
    dispatch({ type: 'PROCESS_DATA', payload: processedData });
  };
};

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

class MyComponent extends React.Component {
  componentDidMount() {
    this.props.fetchData(); // 触发fetchData操作
  }

  componentDidUpdate(prevProps) {
    if (prevProps.data !== this.props.data) {
      this.props.processData(); // 触发processData操作
    }
  }

  render() {
    // 渲染组件
  }
}

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

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