概述
Redux-saga 是一个 Redux 的中间件，用于管理应用程序的 side-effect，例如异步操作和文件 I/O 等。它基于 ES6 的 generator 和 yield 特性，提供了一种全新的异步编程模式。通过将异步流程抽象成 saga，可以更方便的进行测试和调试，同时也提高了代码的可读性和可维护性。
基础概念
Saga
在 Redux-saga 中，saga 是指一个独立的 Generator 函数，负责处理一类特定的异步操作。Saga 通常被设计成与 Redux Store 交互，并在特定的 action type 上监听并执行异步操作，最终以 dispatch 另一个 action 的方式响应结果。
function* loginSaga(action) {
try {
const response = yield call(api.login, action.payload);
yield put({ type: 'LOGIN_SUCCESS', payload: response.data });
} catch (error) {
yield put({ type: 'LOGIN_FAILURE', payload: error.message });
}
}Effect
Effect 是指 Saga 中的操作指令，用于描述和执行异步操作。Redux-saga 提供了很多内置的 Effect，包括 call、put、takeEvery 等。
- call：调用任意函数或 Promise，并等待其返回值。
- put：发送一个 action 到 Store，相当于 dispatch 操作。
- take：监听 Saga 执行期间发生的 action。
- takeEvery：监听指定的 action，并在每次被执行时 fork 一个新的 Saga 实例。
- ...
function* watchLogin() {
yield takeEvery('LOGIN_REQUEST', loginSaga);
}Channel
Channel 是指 Saga 中的消息通道，用于在 Generator 函数之间通信。Redux-saga 内置了多种 Channel 类型，例如 take、put、actionChannel 等。通过使用 Channel，Saga 可以更方便地实现多个 Generator 之间的协作和串行操作。
示例代码
安装
npm install redux-saga
创建并注册 saga
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ -------------------- ---- -------------
------ - -------- - ---- ----------
------ ----------- ---- -------------
----- -------------- - -----------------------
----- ----- - ------------
------------
-------------------------------
--
-----------------------------
------ ------- ------编写 saga
-- -------------------- ---- -------
------ - ----- ---- --------- - ---- ---------------------
------ - --- - ---- --------
--------- ----------------- -
--- -
----- -------- - ----- --------------- ----------------
----- ----- ----- ---------------- -------- ------------- ---
- ----- ------- -
----- ----- ----- ---------------- -------- ------------- ---
-
-
------ --------- ---------- -
----- -------------------------- -----------
-使用 saga
-- -------------------- ---- -------
------ - ----------- - ---- --------------
------ - ------------ - ---- ------------
-------- ------- -
----- -------- - --------------
----- ------------ - ------- -- -
-----------------------
----- -------- - --- -----------------------
----- -------- - -------------------------
----- -------- - -------------------------
----------------------- --------- -------- ----
--
------ -
----- ------------------------
------ ----------- --------------- --
------ --------------- --------------- --
------- ----------------------------
-------
--
-使用原则
遵循单一权责原则
每个 Saga 应该只负责一个具体的异步操作，避免一个 Saga 处理复杂的业务逻辑和多个异步操作。
遵循统一异常处理原则
对于同一类异步操作，应该使用相同的异常处理方式，避免代码中出现多种异常处理方式导致代码难以维护。
遵循任务拆分原则
对于复杂的异步操作，可以将其拆分成多个子任务，避免 Saga 变得过于复杂。
遵循事件驱动原则
Saga 应该通过监听 action 进行异步操作，避免 Saga 自主触发异步操作，使得 Saga 的耦合度降低，代码可复用性提高。
总结
Redux-saga 是一个功能强大的 Redux 中间件，通过引入 Saga 和 Effect 的概念，提供了一种全新的异步编程模式。通过学习 Redux-saga 的基础知识和使用原则，并结合实际项目进行实践，可以更好地理解 Saga 的工作原理，并提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64817e6348841e98940f831c