Redux Saga中如何在DOM事件内按顺序触发多个action？

安全阿岳

2026-10-4

可以按顺序触发多个action，具体实现取决于你使用的action类型

场景1：`CREATE_PRODUCT`为同步action

你当前的写法本身就可以按顺序执行。Redux 默认的同步 dispatch 是阻塞执行的，上一个 action 完全处理完成后才会执行下一行代码。

场景2：`CREATE_PRODUCT`为异步action（绝大多数业务场景属于这类，创建商品需要调用后端接口）

你当前的写法无法满足需求，默认的异步 action dispatch 不会等待接口/异步逻辑执行完成，会立刻触发下一行的GET_LIST_PRODUCT，最终拿到的还是创建前的旧商品列表。

你可以通过常用的Redux中间件实现顺序触发：

方案1：使用redux-thunk

把创建商品的逻辑封装为异步thunk函数，执行时通过await等待创建逻辑完成：

// 封装异步创建商品的thunk action
const createProductAsync = (product) => async (dispatch) => {
  // 调用后端创建商品接口
  const res = await fetch('/api/product/create', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(product)
  })
  const createdProduct = await res.json()
  // 触发创建完成的同步action
  dispatch({ type: 'CREATE_PRODUCT', data: createdProduct })
}

// 调用时按顺序触发
await dispatch(createProductAsync(product))
dispatch({ type: 'GET_LIST_PRODUCT' })

方案2：使用redux-saga

监听创建商品成功的action，自动触发拉取列表的逻辑：

import { takeLatest, put } from 'redux-saga/effects'

function* watchCreateSuccess() {
  // 监听CREATE_PRODUCT动作，执行完成后自动触发拉取列表
  yield takeLatest('CREATE_PRODUCT', function* () {
    yield put({ type: 'GET_LIST_PRODUCT' })
  })
}