在redux中间件中分派多个操作

// 安装redux-thunk中间件：npm install redux-thunk

// 引入redux和redux-thunk
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

// 定义action类型
const FETCH_DATA_REQUEST = 'FETCH_DATA_REQUEST';
const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS';
const FETCH_DATA_FAILURE = 'FETCH_DATA_FAILURE';

// 定义action创建函数
const fetchDataRequest = () => ({
  type: FETCH_DATA_REQUEST
});

const fetchDataSuccess = (data) => ({
  type: FETCH_DATA_SUCCESS,
  payload: data
});

const fetchDataFailure = (error) => ({
  type: FETCH_DATA_FAILURE,
  payload: error
});

// 定义异步操作的action创建函数
const fetchData = () => {
  return (dispatch, getState) => {
    dispatch(fetchDataRequest());

    // 异步操作，例如发送网络请求
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        dispatch(fetchDataSuccess(data));
        // 可以在这里继续分派其他操作
        dispatch(anotherAction());
      })
      .catch(error => {
        dispatch(fetchDataFailure(error));
      });
  };
};

// 定义reducer
const initialState = {
  data: null,
  loading: false,
  error: null
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_DATA_REQUEST:
      return {
        ...state,
        loading: true,
        error: null
      };
    case FETCH_DATA_SUCCESS:
      return {
        ...state,
        loading: false,
        data: action.payload
      };
    case FETCH_DATA_FAILURE:
      return {
        ...state,
        loading: false,
        error: action.payload
      };
    default:
      return state;
  }
};

// 创建store并应用中间件
const store = createStore(reducer, applyMiddleware(thunk));

// 分派异步操作的action
store.dispatch(fetchData());