Redux-Saga 核心概念：声明式 Effects 详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00731/article/details/148362268

Redux-Saga 核心概念：声明式 Effects 详解

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

什么是声明式 Effects

在 Redux-Saga 中，Saga 是通过 Generator 函数实现的。为了表达 Saga 逻辑，我们从 Generator 中 yield 普通的 JavaScript 对象，这些对象被称为 Effects。Effect 是一个包含一些信息的对象，这些信息将由中间件解释执行。你可以把 Effect 看作是给中间件的指令，告诉它执行某些操作（例如调用异步函数、向 store 分发 action 等）。

为什么需要声明式 Effects

让我们通过一个典型场景来理解声明式 Effects 的价值。假设我们有一个 Saga 监听 PRODUCTS_REQUESTED action，每次匹配到这个 action 时，它会启动一个任务从服务器获取产品列表。

直接调用的问题

function* fetchProducts() {
  const products = yield Api.fetch('/products')
  console.log(products)
}

这种方式虽然简单直接，但在测试时会遇到问题：

实际执行了 API 调用，这在测试环境中不可行
需要 mock Api.fetch 函数
测试变得复杂且不可靠

声明式调用的优势

Redux-Saga 提供了更好的方式 - 声明式 Effects：

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

function* fetchProducts() {
  const products = yield call(Api.fetch, '/products')
  // ...
}

这里的关键区别是：

我们不是立即执行 fetch 调用
call 创建了一个 Effect 描述对象
中间件负责执行实际调用并返回结果

核心 Effect 创建器

call 和 apply

call 是 Redux-Saga 中最常用的 Effect 创建器：

yield call(fn, ...args)

它也支持调用对象方法：

yield call([obj, obj.method], arg1, arg2, ...)

apply 是 call 的别名，采用不同参数形式：

yield apply(obj, obj.method, [arg1, arg2, ...])

cps (Continuation Passing Style)

对于 Node 风格的回调函数（形式为 (error, result) => ()），可以使用 cps：

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

const content = yield cps(readFile, '/path/to/file')

测试优势

声明式 Effects 使测试变得极其简单：

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

const iterator = fetchProducts()

assert.deepEqual(
  iterator.next().value,
  call(Api.fetch, '/products')
)

这种测试方式：