Redux saga在DOM事件中按顺序分派多个动作

Redux Saga 是一个用于管理 Redux 应用程序副作用的库，它使用 ES6 的 Generator 函数来使异步流程更易于管理和测试。在 DOM 事件中按顺序分派多个动作，可以通过 Redux Saga 来实现，确保动作按照预期的顺序执行。

基础概念

Redux Saga: 是 Redux 的中间件，允许你管理应用程序的副作用，如异步操作。它使用 Generator 函数来暂停和恢复执行流程。

DOM 事件: 用户与网页交互时触发的事件，如点击、输入等。

动作 (Action): 在 Redux 中，动作是描述发生了什么的简单对象。它们通常由事件触发，并通过 Redux 的 dispatch 方法发送到 store。

类型

takeEvery: 对于每个触发的事件，都会启动一个新的 saga。
takeLatest: 只处理最新的事件，取消之前的任务。
all: 并行执行多个 saga。
race: 同时启动多个 saga，只处理最先完成的那个。

应用场景

表单提交: 在用户提交表单后，可能需要按顺序执行多个异步操作，如验证、保存数据、发送通知等。
数据获取: 在组件挂载时，可能需要按顺序获取多个数据源。

示例代码

假设我们有一个按钮点击事件，需要按顺序执行以下动作：

发送一个请求获取用户信息。
根据用户信息发送另一个请求获取用户的订单。

import { takeLatest, put, call } from 'redux-saga/effects';
import { 
  FETCH_USER_REQUEST, 
  fetchUserSuccess, 
  fetchUserFailure,
  FETCH_ORDERS_REQUEST,
  fetchOrdersSuccess,
  fetchOrdersFailure
} from './actions';

function* fetchUserSaga() {
  try {
    const user = yield call(api.fetchUser);
    yield put(fetchUserSuccess(user));
    yield put({ type: FETCH_ORDERS_REQUEST });
  } catch (error) {
    yield put(fetchUserFailure(error));
  }
}

function* fetchOrdersSaga() {
  try {
    const orders = yield call(api.fetchOrders);
    yield put(fetchOrdersSuccess(orders));
  } catch (error) {
    yield put(fetchOrdersFailure(error));
  }
}

function* watchFetchUser() {
  yield takeLatest(FETCH_USER_REQUEST, fetchUserSaga);
}

function* watchFetchOrders() {
  yield takeLatest(FETCH_ORDERS_REQUEST, fetchOrdersSaga);
}

export default function* rootSaga() {
  yield all([
    watchFetchUser(),
    watchFetchOrders()
  ]);
}