前言
在前端开发中，我们经常会使用 Redux 来管理应用的状态，并借助 Redux 中间件来处理异步数据流。然而，Redux 只是一个架构的设计模式，它的中间件并没有提供太多的方法来优雅地处理异步请求。因此，我们需要借助 redux-promise-bind 这个 npm 包来实现更加高效且简洁的异步处理方法。
什么是 redux-promise-bind
redux-promise-bind 是一个一步处理库，可以和 Redux 配合使用。它使得异步请求变得更加优雅和简洁，并且可以提高开发效率。redux-promise-bind 工具基于 promise 进行异步处理，使用起来非常便捷，能够大大减少开发者的代码量。
安装
在项目根目录的终端中输入以下命令安装 redux-promise-bind：
npm i --save redux-promise-bind
使用
第一步：创建 action
redux-promise-bind 中的异步 action，具有以下基本形态：
export function actionName(args) {
return apiCall(args)(Dispatcher, getState);
}其中，apiCall 是一个函数，它接收一个参数，这个参数会传递给后端 API，用于异步请求。Dispatcher 和 getState 是 Redux 工具的组合方法，从而能够在 Redux 中派遣 action。
为了提高可读性，我们可以使用 API 前缀来识别 actions，例如，
export function fetchUsers(userId) {
return apiCall(`users/${userId}`)(Dispatcher, getState);
}第二步：配置 store
在使用 redux-promise-bind 之前，需要先对 store 进行配置，如下所示：
-- -------------------- ---- -------
------ - ------------ ---------------- ------- - ---- --------
------ --------------- ---- --------------
------ ----------------- ---- ---------------------------
------ ---------------------- ---- ---------------------
------ ----------- ---- ----------------
------ ------- -------- ------------------------------ -
----- --------------------- - -------------------------
----- ----------- - -
----------------
------------------
----------------------
--
----- ------------------ - --------------------------------
----- --------- - ---------------------
----- ---------------- - ----------------------
----- ----- - ------------------------ --------------- ------------------
------ ------
-在上述配置中，除了常规的 thunkMiddleware 和 promiseMiddleware 之外，新增了一个 bindPromiseMiddleware，用于和 redux-promise-bind 在 Redux store 中工作。
第三步：绑定 actions
最后一步是将 action、API 和状态绑定在一起，调用关键逻辑为 bindActionCreator，如下所示：
-- -------------------- ---- -------
------ - ------------------ - ---- --------
------ - ------- - ---- --------------
------ - ---------- - ---- ------------
----- ------------- ------- --------------- -
------------------- -
----- - ------- - - -----------
----------------------
-
-------- -
-- ---
-
-
-------- ---------------------- -
------ -
------ ------------
--
-
-------- ---------------------------- -
----- ------- - -------------------- ---------- -- ----------
------ - ------- --
-
------ ------- ------------------------ -----------------------------------示例代码
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ --------------- ---- --------------
------ ----------------- ---- ---------------------------
------ ---------------------- ---- ---------------------
------ - ------- - ---- --------------
------ - ------------------ - ---- --------
------ ----- ---- --------
------ -------- ---- ------------
------ ----- ---- --------
------ ----------- ---- -------------
------ --------------
----- ------- - ----------------------------------------------
-------- ----------- -
------ -------------------- - ------
-
------ -------- ------------- -
------ ----------------------- ----------
-
------ ----- ---------------------- - -- -- -- --------- -------- -- -- ---- -- ------ -- -
-- ------- ------ --- ----------- -
------ ------------------------- ----------
-
------ -------------
--
----- --- ------- --------------- -
------------------- -
----- - ------- - - -----------
---------------------------- -- - ----------------------------- ---
-
-------- -
------ -
---- ----------------
------- ---- ---- ------ --- - --------------- - ----------------------- - ---- ------------ - -----
------
--
-
-
-------- ---------------------- -
------ -
----- -----------
--
-
-------- ---------------------------- -
----- ------- - -------------------- --------- -- ----------
------ - ------- --
-
----- --------------------- - -------------------------
----- ---------- - ----------------- ------------------ -----------------------
----- ----------- - -------------------------------
----- ----- - ------------------------ -------------
----- ------------ - ------------------------ -------------------------
----------------
--------- --------------
------------- --
------------
-------------------------------
--总结
以上就是 redux-promise-bind 的使用方法与步骤。通过使用 redux-promise-bind，我们能够更加方便的处理 Redux 中的异步请求，拥有更加优雅和简洁的代码，提高开发效率。如果您正在寻找更具简洁性、易用性的异步处理库，不妨一试 redux-promise-bind。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600553d081e8991b448d113f