Redux-Saga 基础教程：使用 Saga 辅助函数-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00570/article/details/148362270

Redux-Saga 基础教程：使用 Saga 辅助函数

redux-saga redux-saga/redux-saga: 是一个用于在 Redux 应用程序中进行异步任务处理的中间件。适合用于需要处理复杂异步逻辑的 Redux 应用。特点是可以将异步任务与同步任务分离，使得应用的状态管理更加清晰和易于维护。项目地址: https://gitcode.com/gh_mirrors/re/redux-saga

什么是 Saga 辅助函数

在 Redux-Saga 中，辅助函数是基于底层 API 封装的高级函数，它们简化了常见场景下的 saga 编写。这些函数能够帮助我们更优雅地处理 action 与 saga 任务之间的关系。

核心辅助函数介绍

1. takeEvery：处理每个 action

takeEvery 是最常用的辅助函数，它的行为类似于 redux-thunk。每当指定的 action 被 dispatch 时，它都会启动一个新的 saga 任务。

典型应用场景：

需要响应每个触发的 action
允许多个相同类型的任务并行运行
例如：每次点击按钮都触发数据获取

示例代码：

import { takeEvery } from 'redux-saga/effects'

function* watchFetchData() {
  yield takeEvery('FETCH_REQUESTED', fetchData)
}

在这个例子中，每次 FETCH_REQUESTED action 被 dispatch 时，都会启动一个新的 fetchData saga 任务。如果有多个 FETCH_REQUESTED action 被快速连续 dispatch，将会有多个 fetchData 任务同时运行。

2. takeLatest：只处理最新的 action

takeLatest 是另一个常用辅助函数，它确保任何时候只有一个任务在执行。如果已有任务在执行时又收到新的 action，它会自动取消前一个任务。

典型应用场景：

只需要最新请求的结果
防止旧请求覆盖新请求的结果
例如：搜索框输入时的自动补全

示例代码：

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

function* watchFetchData() {
  yield takeLatest('FETCH_REQUESTED', fetchData)
}

实际应用示例

让我们通过一个完整的 AJAX 数据获取示例来理解这些辅助函数的用法：

import { call, put } from 'redux-saga/effects'
import Api from './api'

// 处理数据获取的 worker saga
export function* fetchData(action) {
  try {
    const data = yield call(Api.fetchUser, action.payload.url)
    yield put({ type: 'FETCH_SUCCEEDED', data })
  } catch (error) {
    yield put({ type: 'FETCH_FAILED', error })
  }
}

// 监听 action 的 watcher saga
function* watchFetchData() {
  // 使用 takeEvery 处理每个请求
  yield takeEvery('FETCH_REQUESTED', fetchData)
  
  // 或者使用 takeLatest 只处理最新请求
  // yield takeLatest('FETCH_REQUESTED', fetchData)
}

组合使用多个辅助函数

在实际项目中，我们通常需要监听多种 action。Redux-Saga 允许我们同时使用多个辅助函数：

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

function* fetchUsers(action) { /* ... */ }
function* createUser(action) { /* ... */ }
function* deleteUser(action) { /* ... */ }

export default function* rootSaga() {
  yield takeEvery('FETCH_USERS', fetchUsers)  // 处理每个获取用户请求
  yield takeEvery('CREATE_USER', createUser)  // 处理每个创建用户请求
  yield takeLatest('DELETE_USER', deleteUser) // 只处理最新的删除请求
}