Redux-Saga 初学者教程：从计数器示例理解 Saga 核心概念-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00318/article/details/148362273

Redux-Saga 初学者教程：从计数器示例理解 Saga 核心概念

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

前言

Redux-Saga 是一个用于管理应用程序副作用的库，它通过 ES6 的 Generator 函数让异步流程更易于管理、测试和调试。本教程将通过一个简单的计数器示例，带你逐步理解 Redux-Saga 的核心概念和工作原理。

基础概念

在开始之前，我们需要理解几个关键概念：

Generator 函数：ES6 引入的特殊函数，可以通过 yield 暂停执行，并通过 next() 方法恢复执行
Effect：Redux-Saga 中的指令对象，描述要执行的操作（如调用函数、派发 action 等）
Saga：由 Generator 函数实现的业务逻辑流程

环境准备

首先创建一个基本的 React + Redux 计数器应用，包含两个按钮："增加"和"减少"。我们将在此基础上逐步添加 Redux-Saga。

第一个 Saga：Hello World

让我们从最简单的 Saga 开始：

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

这个 Generator 函数会在执行时打印一条消息。注意函数名前的星号(*)，这是 Generator 函数的语法标记。

要在应用中使用这个 Saga，我们需要：

创建 Saga 中间件
将中间件连接到 Redux store
运行我们的 Saga

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

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

实现异步逻辑

现在让我们添加更有趣的功能 - 异步增加计数器。我们将添加一个按钮，点击后等待1秒再增加计数。

首先修改 UI 组件，添加新按钮：

const Counter = ({ value, onIncrement, onDecrement, onIncrementAsync }) => (
  <div>
    <button onClick={onIncrementAsync}>Increment after 1 second</button>
    {/* 其他按钮... */}
  </div>
)

然后创建处理异步逻辑的 Saga：

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

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

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

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

这里有几个关键点：

delay 函数返回一个 Promise，在指定时间后解析
incrementAsync Saga 先等待1秒，然后派发 INCREMENT action
watchIncrementAsync Saga 监听所有 INCREMENT_ASYNC action，并为每个 action 启动 incrementAsync

组合多个 Saga

实际应用中会有多个 Saga，我们需要一个根 Saga 来组合它们：

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

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

all Effect 可以并行运行多个 Saga。现在我们只需要在中间件中运行 rootSaga：

sagaMiddleware.run(rootSaga)

测试 Saga

Redux-Saga 的一个主要优势是易于测试。让我们看看如何测试 incrementAsync Saga：

import test from 'tape'
import { call, put } from 'redux-saga/effects'
import { incrementAsync, delay } from './sagas'

test('incrementAsync Saga test', (assert) => {
  const gen = incrementAsync()
  
  // 测试第一个 yield
  assert.deepEqual(
    gen.next().value,
    call(delay, 1000),
    '应该调用 delay(1000)'
  )
  
  // 测试第二个 yield
  assert.deepEqual(
    gen.next().value,
    put({type: 'INCREMENT'}),
    '应该派发 INCREMENT action'
  )
  
  // 测试 Saga 是否结束
  assert.deepEqual(
    gen.next(),
    { done: true, value: undefined },
    'Saga 应该结束'
  )
  
  assert.end()
})

测试的关键在于：