Redux-Saga 入门教程：从计数器示例理解异步流程管理-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00053/article/details/148362102

Redux-Saga 入门教程：从计数器示例理解异步流程管理

redux-saga 项目地址: https://gitcode.com/gh_mirrors/red/redux-saga

什么是 Redux-Saga

Redux-Saga 是一个用于管理应用程序副作用（如异步数据获取、访问浏览器缓存等）的库。它通过使用 ES6 的 Generator 函数来使异步流程更易于读取、写入和测试。与 Redux-Thunk 不同，Redux-Saga 提供了一种声明式的方式来处理副作用，使得业务逻辑更加清晰。

环境准备

在开始之前，我们需要一个基础的 Redux 计数器应用作为起点。这个应用包含两个基本功能：

增加计数器值
减少计数器值

第一个 Saga：Hello World

让我们从最简单的示例开始 - 打印 "Hello Sagas!"。

创建 sagas.js 文件并添加以下代码：

export function* helloSaga() {
  console.log('Hello Sagas!')
}

这里使用了 Generator 函数（由 function* 定义），它是 Saga 的基础构建块。

将 Saga 中间件连接到 Redux Store：

import { createSagaMiddleware } from 'redux-saga'
import { helloSaga } from './sagas'

const sagaMiddleware = createSagaMiddleware()
const store = createStore(
  reducer,
  applyMiddleware(sagaMiddleware)
)
sagaMiddleware.run(helloSaga)

这样我们就完成了最基本的 Saga 集成，虽然它目前只是打印一条消息。

实现异步计数器

现在让我们添加更有趣的功能 - 延迟1秒后增加计数器。

首先在 UI 中添加一个新按钮：

<button onClick={onIncrementAsync}>
  Increment after 1 second
</button>

创建处理异步逻辑的 Saga：

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

const delay = (ms) => new Promise(res => setTimeout(res, ms))

export function* incrementAsync() {
  yield delay(1000)
  yield put({ type: 'INCREMENT' })
}

export function* watchIncrementAsync() {
  yield takeEvery('INCREMENT_ASYNC', incrementAsync)
}

这里有几个关键概念：

delay 函数返回一个 Promise，在指定毫秒后解析
incrementAsync 是一个工作 Saga，执行实际的异步逻辑
watchIncrementAsync 是一个监听 Saga，响应特定的 action

使用 all Effect 组合多个 Saga：

export default function* rootSaga() {
  yield all([
    helloSaga(),
    watchIncrementAsync()
  ])
}

核心概念解析

Effect

Effect 是一个简单的 JavaScript 对象，包含一些指令，这些指令将由中间件执行。常见的 Effect 创建器包括：

call(fn, ...args)：调用函数，可用于处理 Promise
put(action)：分发一个 action 到 Store
takeEvery(pattern, saga)：监听每个匹配的 action 并执行 saga

Generator 函数

Saga 使用 Generator 函数来暂停和恢复执行。当 yield 一个 Effect 时，Saga 会暂停，直到 Effect 被完成。这使得异步代码看起来像同步代码一样线性执行。

测试 Saga

Redux-Saga 的一个主要优势是易于测试。我们可以测试 Generator 函数的每一步：

test('incrementAsync Saga test', (assert) => {
  const gen = incrementAsync()
  
  assert.deepEqual(
    gen.next().value,
    call(delay, 1000),
    '应该调用 delay(1000)'
  )
  
  assert.deepEqual(
    gen.next().value,
    put({type: 'INCREMENT'}),
    '应该分发 INCREMENT action'
  )
  
  assert.deepEqual(
    gen.next(),
    { done: true, value: undefined },
    'Saga 应该结束'
  )
})

通过比较每一步 yield 的值，我们可以确保 Saga 按预期工作。