Redux-Saga 详解：如何使用 Saga 实现异步流控制-JavaScript中文网-JavaScript教程资源分享门户

前言：

随着前端开发的不断发展，功能的复杂化，我们需要更为高效的异步流控制，Redux-Saga 便是一种非常好用的工具。本篇文章将详细介绍什么是 Redux-Saga，以及如何使用 Saga 实现异步流控制。本文适用于具有一定 React 和 Redux 基础的开发者，并需要了解一些 ES6 和 Generator 的语法。

什么是 Redux-Saga？

Redux-Saga 是一个用于管理 Redux 应用程序的副作用（如异步数据流和访问浏览器缓存等）的库。它使用了 ES6 Generator 函数让异步流更加容易管理，同时让异步流代码具有更好的可测试性、可复用性、可读性。

Saga 允许您通过 “generators” 创建更好的前端应用程序，并使异步流作为一等公民的概念更容易处理。它提供了一个方法来对异步流进行建模，允许您考虑应用程序的 control flow，而不是如何编写令人困惑的回调式代码。

Redux-Saga 与其他同类库如 Redux-Thunk 相比的优势在于，使用 redux-saga 更容易管理副作用代码，这些代码更易于测试、调试和重构。

Redux-Saga 核心概念

Effect

Effect 是计算 Saga 逻辑的指令。当 Saga Middleware 执行 Generator 函数时，它会暂停在 yield 表达式上。这时，中间件会在 Effect 上启动解释器，并执行相应的操作，直到下一个 yield 表达式或 Generator 结束。

在 Saga model 中，Effect 是用于描述 Redux 状态及 API 调用的普通 Javascript 对象。每个 Effect 都包含一个指令（如 put、call、select 等）和相关的信息。

下面是几个常用的 Effect：

put：dispatch action 到 store
call：以同步调用的方式运行函数
take：暂停 Generator，等待 dispatch 匹配指定 action
select：从 store 取出 state
fork：以非阻塞的方式执行一个 Generator
cancel：取消某个 fork

Saga

Saga 是基于 generator 的定义了一种执行序列的方式，表示 Saga 本身实际上是一个 Generator 函数。

与普通 Generator 不同的是，当我们运行 Saga Generator 函数时，它不仅可以调用所有异步函数，还可以和 store 进行交互并发送 action。Saga 会自动重启，并根据先前的 Generator 内部状态继续。

Worker

Worker 是 Saga Generator 中的普通函数，用于处理某一类动作的逻辑。Worker 的执行永远是同步的，但是可以调用异步代码。Worker 的执行不会影响 Saga Generator 本身的执行。

在 Saga Generator 中，worker 由 takeEvery 和 takeLatest 函数调用，但是也可以使用其他 Saga API 来调用。

Watcher

Watcher 是指使用 take* 函数来监听某一指定 action，该 action 触发后，会派发任务到 worker 中执行。Watcher 是 Generator 的入口点。当某个 action 被发起时，watcher 可以通过 take 当前 action，并启动执行 worker。

如何使用 Redux-Saga

下面通过一个简单的例子来介绍如何使用 Redux-Saga。

安装 Redux-Saga

首先，我们需要安装 Redux-Saga：

npm install redux-saga

实现 Saga

接下来，我们需要实现一个简单的 Saga，这里假设我们要调用 REST API 来获取用户数据。

首先，我们定义一个 worker 函数，它将负责使用 Axios 来获取用户列表。如果发生错误，它将使用 dispatch 发送一个错误 action。

// javascriptcn.com 代码示例
import axios from 'axios';
import { call, put } from 'redux-saga/effects'
import { takeEvery } from 'redux-saga/effects'

function* fetchUserList(action) {
  try {
    const response = yield call(axios.get, 'https://jsonplaceholder.typicode.com/users');
    yield put({ type: 'FETCH_USER_LIST_SUCCESS', userList: response.data });
  } catch (e) {
    yield put({ type: 'FETCH_USER_LIST_FAIL', message: e.message });
  }
}

然后，我们定义一个 watcher 函数，它将监听一个 FETCH_USER_LIST action，并在 action 被触发时调用 fetchUserList worker 函数。

function* watchFetchUserList() {
  yield takeEvery('FETCH_USER_LIST', fetchUserList);
}

最后，我们将在主 Saga 上启动 watchFetchUserList。

export default function* rootSaga() {
  yield all([
    watchFetchUserList(),
  ]);
}

现在，我们的 Saga 已经完成了，当在组件中 dispatch 一个 FETCH_USER_LIST action 时，将触发 fetchUserList 函数。

使用 Saga

在我们的组件中使用 Saga 的方式与 Redux-Thunk 类似：

// javascriptcn.com 代码示例
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchUserList } from './actions';

function UserList() {
  const dispatch = useDispatch();
  const userList = useSelector(state => state.userList);

  useEffect(() => {
    dispatch(fetchUserList());
  }, []);

  return ...;
}

这里，我们会在组件渲染时触发 fetchUserList action，Saga 将监听该 action 并在收到后调用 fetchUserList 函数。

总结

Redux-Saga 提供了一种方便的方式来处理应用程序中的异步操作和副作用。它不仅提供了一种优雅的代码组织方式，而且还有助于测试、调试和重构代码。在你的下一个项目中尝试使用 Redux-Saga，您会感谢自己。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6542d8ba7d4982a6ebc7dcbd