什么是 redux-saga-restart
redux-saga-restart 是一个轻量级的 redux-saga 扩展库，它提供了一种简单的方式来终止并重新启动一个正在运行的 sagas。这在某些场景下是非常有用的，比如应用需要处理多个异步操作，而用户在进行操作过程中需要取消某些操作，再进行其他操作。
安装
在使用 redux-saga-restart 前，我们需要先安装 redux 和 redux-saga。
npm install redux redux-saga --save
然后安装 redux-saga-restart：
npm install redux-saga-restart --save
如何使用 redux-saga-restart
基本使用
首先，让我们来看一下最基本的使用方式。假设我们有一个 saga，它会一直运行直到被终止：
-- -------------------- ---- -------
------ - ----- ---- ---- - ---- ---------------------
--------- -------- -
----- ------ -
--- -
----- ---- - ----- ----------- -------------
----- ----- ----- --------------------- -------- ---- ---
- ----- ------- -
----- ----- ----- --------------------- ----- ---
-
----- ---------------------------
-
-在这个例子里，我们使用了一个 while 循环来一直运行 saga，直到被终止。在每次循环中，我们用 try...catch 块来处理异步请求，然后使用 take 监听 FETCH_DATA_RESTART action，以便在需要的时候重新启动 saga。
现在，让我们来看一下如何使用 redux-saga-restart 来优雅地实现这个功能：
-- -------------------- ---- -------
------ - ----- --- - ---- ---------------------
------ - ----------- - ---- ---------------------
--------- -------- -
--- -
----- ---- - ----- ----------- -------------
----- ----- ----- --------------------- -------- ---- ---
- ----- ------- -
----- ----- ----- --------------------- ----- ---
-
-
------ ------- ------------------- ----------------------在这个例子里，我们先将原本的 while 循环改为一个简单的 try...catch 块，然后使用 redux-saga-restart 的 restartable 函数将其转换为一个支持重启的 saga。
高级功能
除了基本使用方式之外，redux-saga-restart 还有许多高级功能，比如可以在重新启动时传递参数，也可以在启动后暂停一段时间再执行。
让我们来看一个例子，假设我们的应用需要支持多语言，而我们的 i18n 数据是通过一个异步请求获取的（我们假设这个请求需要一些时间来完成）：
-- -------------------- ---- -------
------ - ----- --- - ---- ---------------------
------ - ----------- - ---- ---------------------
--------- --------------------- -
--- -
----- ---- - ----- ----------- -----------------------
----- ----- ----- -------------------------- -------- ---- ---
- ----- ------- -
----- ----- ----- -------------------------- ----- ---
-
-
--------- -------- -------- - ------ - -- -
----- ------------------- --------
-
------ ------- ------------------- -------------------在这个例子里，我们将获取 i18n 数据的过程封装为了一个独立的 saga，然后在主 saga 中调用它。
现在，我们来看一下如何使用 redux-saga-restart 来重新启动这个 saga，并传递一个新的 locale 参数：
-- -------------------- ---- ------- ------ - ------ --- - ---- --------------------- ------ - ------- - ---- --------------------- ----- ----- ----- ------------------ -------- - ------- ---- - --- --- -- ----- -- --- ---- -- ------ -- ------ -- ------ ----- ------------ -- ---- --- - ------ ------ --------- ----- -------------------------- - ------- ---- ---
在这个例子里，我们使用了 redux-saga 的 delay 函数来暂停 1 秒，然后使用 redux-saga-restart 的 restart 函数来重新启动 FETCH_I18N_DATA saga，并传递了一个新的 locale 参数。
结论
在本文中，我们介绍了 npm 包 redux-saga-restart，并详细讲解了如何使用它。redux-saga-restart 提供了一种简单但强大的方式来终止并重新启动正在运行的 sagas，这在处理异步操作时非常有用。我们希望本文对您对此有所帮助，并能够在实际开发中应用到 redux-saga-restart。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067007e361a36e0bce8a80