redux-saga-utils是一个有助于开发者更快速，更简便地创建Redux Saga的npm包。它提供了一些强大的工具和函数，用于简化开发过程中的一些繁琐，重复的工作。本文将介绍如何使用这个npm包，帮助开发者更好地开发Redux Saga。
安装
安装redux-saga-utils，在终端命令行中输入以下命令：
npm install --save redux-saga-utils
简介
redux-saga-utils 提供了一些有用的函数和工具，如takeEvery和 takeLatest函数用于简化处理相同的redux action 并发请求的代码。
使用 takeEvery 和 takeLatest
在Redux Saga中，我们经常需要对已触发的Redux Action进行操作。例如，当我们需要处理一个用户点击“登录”按钮时，我们需要在Redux Store发送一个LOGIN_REQUEST action，随后需要监听此action并做出相应的响应。通常我们会写如下代码：
-- -------------------- ---- -------
------ - ---------- ----- --- - ---- --------------------
------ - -------------- -------------- ------------- - ---- ------------
--------- -------------------- -
--- -
----- -------- - ----- --------------- ---------------
----- ----- ----- -------------- -------- -------- --
- ----- ------- -
----- ----- ----- -------------- -------- ----- --
-
-
------ ------- ----------- -
----- ------------------------ -------------
-使用redux-saga-utils的takeEvery函数后的代码如下：
-- -------------------- ---- -------
------ - --------- - ---- --------------------
------ - ------------- - ---- ------------
------ - --------- - ---- ------------------
------ - ----- --- - ---- --------------------
------ - --- - ---- --------
------ - -------------- ------------- - ---- ------------
--------- -------------------- -
--- -
----- -------- - ----- --------------- ---------------
----- ----- ----- -------------- -------- -------- --
- ----- ------- -
----- ----- ----- -------------- -------- ----- --
-
-
------ ------- ----------- -
----- ------------------------ -------------
-在上面的示例代码中，我们只需导入takeEvery函数，就可以将同一action的多个请求合并为一个并发执行。takeEvery函数接受两个参数：第一个参数是我们要监听响应的Action，第二个参数是一个generator函数，用于处理响应。
如果你想只响应最后一次请求，可以使用takeLatest函数，如下所示：
-- -------------------- ---- -------
------ - ---------- - ---- --------------------
------ - ------------- - ---- ------------
------ - ---------- - ---- ------------------
------ - ----- --- - ---- --------------------
------ - --- - ---- --------
------ - -------------- ------------- - ---- ------------
--------- -------------------- -
--- -
----- -------- - ----- --------------- ---------------
----- ----- ----- -------------- -------- -------- --
- ----- ------- -
----- ----- ----- -------------- -------- ----- --
-
-
------ ------- ----------- -
----- ------------------------- -------------
-路由监听
除了 takeEvery 和 takeLatest方案， redux-saga-utils 还提供了一些其他的函数。一个有用的函数是 watchLocationChange，它用于监听浏览器历史路由更改。
import { fork } from 'redux-saga/effects'
import { watchLocationChange } from 'redux-saga-utils'
export default function*() {
yield fork(watchLocationChange)
}使用 watchLocationChange 后可以侦听路由更改 action 并实现对路由的自动跟踪和更新。
总结
通过使用redux-saga-utils，我们可以简化Redux Saga的开发过程，并且节省时间和代码量。我们可以使用takeEvery和takeLatest函数来合并相同Action的多次请求，并使用watchLocationChange函数来轻松地实现浏览器路由的监听。对于Redux Saga的爱好者们，该npm包是必不可少的工具。
希望这篇文章能够帮助你更好地使用redux-saga-utils，并且让你的Redux Saga开发更加顺利和高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556f281e8991b448d3d64