随着前端应用程序变得越来越大，管理应用程序的状态变得越来越复杂。Redux-saga 是一个强大的 Redux 中间件，它允许我们在 Redux 规范下用异步和非阻塞的方式来处理 side effect，并以非常直观和可维护的方式扩展应用程序。
在本文中，我们将学习如何在 Next.js 中使用 Redux-saga。我们将详细介绍 Redux-saga 的核心概念，并通过代码示例进行演示，以帮助您更好地理解和应用这一技术。
Redux-saga 简介
Redux-saga 是一个使用生成器函数（Generator Function）实现的 Redux 中间件。它允许我们在 Redux 规范下用异步和非阻塞的方式来处理 side effect，如异步请求、定时器和websocket等等，以及在应用程序中添加了复杂的控制流。
下面是几个 Redux-saga 中最重要的概念：
Effect
Effect 是一个普通的 JavaScript 对象，它描述了要执行的操作。例如，当我们需要发起一个异步请求时，就需要使用 Effect：
------ - ---- ----- ---------- - ---- --------------------
------ - ------------- - ---- --------
--------- ----------------- -
--- -
----- ---- - ----- ------------------- ----------------------
----- ----- ----- --------------------- -------- ---- --
- ----- ------- -
----- ----- ----- --------------------- ----- --
-
-
------ ------- --------- ---------- -
----- -------------------------------- ----------
-在这个例子中，我们使用了 3 个 Effect：call、put 和 takeLatest。
call Effect 是一个函数调用 Effect，它将调用一个异步函数并暂停，等待该函数返回。一旦该函数返回，生成器函数继续执行，并将其返回值作为 Effect 内部的结果。
put Effect 是一个 dispatch Effect，它将派发一个 action 到 Redux Store 以更新 state。
takeLatest Effect 将监听一个特定的 action，一旦该 action 被派发，它将取消之前所有未完成的同类 operation，然后执行最新的 action。
由于 Effect 是 JavaScript 对象，因此我们可以很容易地编写一个 Saga，来处理应用中所涉及的所有 side effect。
以下是在 Next.js 中使用 Redux-saga 的步骤：
第一步：创建 store
在 Next.js 应用程序中，我们可以使用在 _app.js 中创建一个 Redux store。
------ - -------- - ---- -------------
------ - ------------ --------------- - ---- -------
------ -------------------- ---- ------------
------ ----------- ---- -------------
------ -------- ---- ----------
----- -------------- - ----------------------
----- ----- - ------------
------------
-------------------------------
-
----------------------------
-------- ------- ---------- --------- -- -
------ -
--------- --------------
---------- -------------- --
-----------
-
-
------ ------- -----在这个例子中，我们通过 createSagaMiddleware 创建了 sagaMiddleware 并将其与 store 一起使用。
第二步：创建 Sagas
创建一个 Saga，我们只需创建一个普通的 JavaScript 函数，并使用一个或多个 Effect 来描述异步操作。在 Next.js 中，我们可以将 Saga 定义为一个单独的文件，并使用 export default 导出。
例如，我们可以编写以下 Saga：
------ - ----------- ---- ---- - ---- --------------------
------ - --------- - ---- --------
--------- ---------------- -
--- -
----- ---- - ----- --------------- ------------------
----- ----- ----- --------------------- -------- ---- --
- ----- ------- -
----- ----- ----- --------------------- ----- --
-
-
------ ------- --------- ---------- -
----- -------------------------------- ---------
-这个 Saga 将监听 'FETCH_USER_REQUEST' action 并使用 call Effect 调用 fetchUser 函数执行异步调用，然后使用 put Effect 派发 FETCH_USER_SUCCESS action。
第三步：连接 Saga
要连接 Saga 到 store，我们可以将它们放在 sagas.js 文件中，然后使用 sagaMiddleware.run() 以在应用程序启动时加载它们。
------ - --- - ---- --------------------
------ -------- ---- --------
--------- ---------- -
----- -----
----------
--
-
------ ------- --------在这个例子中，我们使用 build-in 的 all Effect 将每个 Saga 合并在一起。
第四步：使用 Saga
现在，我们可以在应用程序中实现异步 action 了。
以下代码演示如何在 Next.js 应用程序中使用 Sagas 发起异步请求。
------ - --------- - ---- -------
------ - ------------ ----------- - ---- -------------
------ - ---------------- - ---- ------------
-------- ---------- -
----- -------- - -------------
----- ---- - ----------------- -- -----------
------------ -- -
--------------------------- --- ----- ---
-- ---
------ -
--
-------- ---------
------------- --
---------------------
-
----------- --
----------- --------------------------
-
---------- --
-----
---------- ----------------------
----------- -----------------------
------
-
---
-
-
------ ------- --------在这个例子中，我们在组件中使用 useDispatch 和 useSelector Hooks 来选择 store 中的 state，并在组件中发起异步 action。
总结
Redux-saga 是一个强大的 Redux 中间件，可以帮助我们在应用程序中处理 side effect 的复杂性。在 Next.js 中使用 Redux-saga 非常简单，只需要遵循上述步骤即可。我们强烈建议您在您的下一个应用程序中使用 Redux-saga，以帮助您更好地控制应用程序的状态变化。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/651e1f4c95b1f8cacd5ce89d