使用一个事件在redux中触发多个ajax请求

// 安装redux-thunk：npm install redux-thunk

// 异步Action Creator
const fetchData = () => {
  return (dispatch, getState) => {
    dispatch({ type: 'FETCH_DATA_REQUEST' });

    // 执行Ajax请求
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
      })
      .catch(error => {
        dispatch({ type: 'FETCH_DATA_FAILURE', payload: error });
      });
  };
};

// 在组件中触发异步Action
dispatch(fetchData());

// 安装redux-saga：npm install redux-saga

import { call, put, takeEvery } from 'redux-saga/effects';

// Worker Saga
function* fetchData() {
  try {
    yield put({ type: 'FETCH_DATA_REQUEST' });

    // 执行Ajax请求
    const data = yield call(fetch, 'https://api.example.com/data');
    const jsonData = yield call([data, 'json']);

    yield put({ type: 'FETCH_DATA_SUCCESS', payload: jsonData });
  } catch (error) {
    yield put({ type: 'FETCH_DATA_FAILURE', payload: error });
  }
}

// Watcher Saga
function* watchFetchData() {
  yield takeEvery('FETCH_DATA', fetchData);
}

// 在根Saga中启动Watcher Saga
export default function* rootSaga() {
  yield all([
    watchFetchData(),
    // 其他Watcher Saga...
  ]);
}