Redux-saga 是一个 Redux 的中间件，它可以帮助我们处理异步操作，并且可以让我们更好地控制代码的流程。本文将介绍 Redux-saga 的核心概念和使用方法，并给出示例代码。
什么是 Redux-saga？
Redux-saga 是一个用于管理应用程序边界效应（如网络请求和阻塞 I/O）的库。它利用 ES6 生成器（generator）的特性来使异步流程更具可读性和可测试性。Redux-saga 是 Redux 的中间件，因此需要使用 Redux 以及 React 应用程序。
核心概念
Effect
Redux-saga 中最重要的概念是 Effect。Effect 是一个简单的 JavaScript 对象，用于描述和指导 Sagas 在执行期间做什么。Redux-saga 提供了很多内置 Effect，如 call、put、take、select 等。下面介绍几个常用的 Effect。
call
call 用于调用异步函数。它的用法类似于 JavaScript 中的函数调用，区别在于它可以处理异步操作。下面是一个例子：
import { call } from 'redux-saga/effects';
function* mySaga() {
const response = yield call(fetch, 'https://api.example.com/data');
yield put({ type: 'FETCH_SUCCESS', payload: response });
}上面代码中，fetch 是一个异步函数，若直接调用它，程序将不能得到正确的响应结果。使用 call 来调用它可以保证获取到正确的返回结果，这也是 Redux-saga 的主要功能之一。
put
put 用于向 Redux Store 分发 action。它的作用类似于 dispatch，但是 put 可以被用来区分特定的 action，并将其发送到指定的 reducer。如下：
import { put } from 'redux-saga/effects';
function* mySaga() {
yield put({ type: 'FETCH_PENDING' });
}上面代码表示，当 mySaga 函数被调用时，将会向 Redux 发送一个 FETCH_PENDING action。
take
take 用于监听指定的 action。它会等待 Redux 中有一个特定的 action 发生，然后采取相应的操作。如下：
import { take } from 'redux-saga/effects';
function* mySaga() {
const action = yield take('APP_STARTED');
console.log('app started:', action.payload);
}上面代码表示，当 mySaga 函数被调用时，它会等待一个名为 APP_STARTED 的 action 从 Redux 中抵达，然后将 action.payload 打印出来。
select
select 用于查询 Redux state。它用于在 Sagas 中获取 Redux Store 中的数据，一种常见的用法是在异步操作时，等待所有的状态都被更新后再进行下一步操作。如下：
import { select } from 'redux-saga/effects';
function* mySaga() {
const state = yield select();
yield console.log('current state:', state);
}上面代码表示，当 mySaga 函数被调用时，它会获取当前的 Redux Store 中的状态，并将其打印出来。
Saga
Saga 是一个用于管理应用程序边界效应的生成器。它是一个使用 generator 函数编写的长期运行的进程。Saga 使用 Effect 来管理异步流程。Saga 使用迭代的方式执行一个或多个 Effect，当 Effect 执行完成时，Saga 会继续执行剩余的代码。如下：
-- -------------------- ---- -------
------ - ----- ---- --------- - ---- ---------------------
--------- ----------------- -
--- -
----- -------- - ----- ----------- --------------------------------
----- ----- ----- ---------------- -------- -------- ---
- ----- ------- -
----- ----- ----- -------------- ----- ---
-
-
--------- ---------------- -
----- ----------------------- -----------
-上面代码中，fetchData 是一个 Saga，它首先调用了 call 函数来获取响应结果。如果成功，它会 put 一个 FETCH_SUCCESS action。如果调用失败，它会 put 一个 FETCH_ERROR action。
Middleware
Redux-saga 实质上是 Redux 中的一个中间件。使用它需要 Store 安装相应的 middleware。在上述代码中，我们使用了 takeEvery 功能来监听 FETCH_DATA action。
使用 Redux-saga
下面是一个完整的 Redux-saga 的使用示例。示例中的代码通过 Saga 来处理异步请求，并将请求结果通过 dispatch 发送给 reducer。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ -------------------- ---- -------------
------ ----- ---- --------
------ - ----- ---- --------- - ---- ---------------------
-- ------ -----
----- ---------- - -------------
----- ------------- - ----------------
----- ----------- - --------------
-- -------
----- --------- - --------- -- -- ----- ----------- ------- ---
----- ------------ - --------- -- -- ----- -------------- ------- ---
----- ---------- - ------- -- -- ----- ------------ ----- ---
-- -------
----- ------------ - -
-------- ------
----- ---
------ -----
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- -----------
------ - --------- -------- ---- --
---- --------------
------ - -------- ------ ----- --------------- ------ ---- --
---- ------------
------ - -------- ------ ----- --- ------ ------------ --
--------
------ ------
-
--
-- -----
--------- --------------------- -
--- -
----- -------- - ----- --------------- ----------------------------------------------------------
----- ---------------------------------
- ----- ------- -
----- -----------------------
-
-
--------- ---------------- -
----- --------------------- ---------------
-
-- -----
----- -------------- - -----------------------
----- ----- - -------------------- ---------------------------------
-----------------------------------
-- -----
-----------------------------------上面的示例代码首先定义了三个 action types 和三个 action creator。然后再定义 reducer。最后，我们定义了两个 sagas，一个用于处理异步请求，另一个用于监听 FETCH_DATA action。然后我们创建了一个 Redux store，并将 sagaMiddleware 作为中间件函数传递给 createStore 函数。之后，我们使用 run 函数运行 saga 并 dispatch 了一个 action。
总结
Redux-saga 是一个用于管理应用程序边界效应的库，它利用 ES6 生成器编写长期运行的进程来管理异步操作。本文介绍了 Redux-saga 的核心概念和使用方法，并给出了一个完整的使用示例。Redux-saga 可以让我们更加容易地处理异步操作，保持应用逻辑的清晰性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64806d5648841e9894fe30b7