在前端开发中，Redux 已经成为了一个不可忽视的状态管理工具。但随着项目复杂度的增加，Redux 中的异步操作也越来越多。这时，redux-thunk-action-helpers 这个 npm 包就为我们解决了异步操作带来的问题。
什么是 redux-thunk-action-helpers
redux-thunk-action-helpers 是一个帮助我们处理异步操作的工具包，它为 Redux 中的 Thunk Action 提供了更加便利的创建方式，并且在处理异步操作时更加高效。
redux-thunk-action-helpers 的安装
在使用 redux-thunk-action-helpers 前，我们需要先安装它。可以通过下面的 npm 命令来安装：
--- ------- -------------------------- ------
redux-thunk-action-helpers 的使用
接下来就让我们一起来看一下 redux-thunk-action-helpers 的使用吧。
创建异步操作的 Action
在 Redux 中，我们通常使用 Redux-Thunk 进行异步操作。但是 Redux-Thunk 的 Action Creator 写起来比较麻烦，因为需要手动指定 type、payload 等一系列属性。而在使用 redux-thunk-action-helpers 后，我们可以更简单地创建异步操作的 Action。
------ - ------------ - ---- ----------------------------- ------ ----- ------------- - -------- -- -------------- ---------- ------------------------------------ ---------- ------------------------------------ ---------- ------------------------------------ -------- -- -- ------------------------------------- -- ------------ ---
通过上面这段代码，我们就创建了一个名为 fetchUserInfo 的 Action Creator。它会根据传入的 userId 创建三个 Action，分别是异步请求开始时的 Action、异步请求成功时的 Action 和异步请求失败时的 Action。
处理异步操作
在以上示例中，我们使用了 fetch 方法来模拟异步操作。但我们还需要使用 Redux Thunk 中的 dispatch 方法来发送 Action 并处理异步操作。
------ ----- ------------- - -------- -- ---------- -- -
----------
----- ------------------------------------
---
----------------------------
--------- -- -----------
---------- -- -
----------
----- ------------------------------------
-------- -----
---
--
------------ -- -
----------
----- ------------------------------------
-------- ------
---
---
--通过这段代码，我们就可以将创建的异步操作的 Action Creator 转换成 Redux Thunk 中的 Action，并使用 dispatch 方法来处理异步操作。这样我们就可以更加便捷地处理异步操作了。
redux-thunk-action-helpers 的优势
通过上面的示例，我们可以将 redux-thunk-action-helpers 带给我们的优势总结为以下三点：
- 创建 Action 更加简单，只需要在 createAction 中指定 onRequest、onSuccess 和 onFailure 三个属性和一个 Promise。
- 处理异步操作更加高效，不需要手动设置 type 和 payload 。
- 可以根据 Promise 状态自动派发结果，不需要手动判断 Promise 的状态。
小结
在本文中，我们介绍了 npm 包 redux-thunk-action-helpers 的用法和优势，并提供了一个创建异步操作的 Action 的示例。使用 redux-thunk-action-helpers 可以让我们更加便捷地处理 Redux 中的异步操作。如果你是一个使用 Redux 的前端工程师，那么 redux-thunk-action-helpers 绝对是一个值得尝试的工具。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066b5951ab1864dac66e9d