前言
在 React 应用开发中，Redux 是非常常用且重要的一个库，它可以帮助我们方便地管理组件状态。而在处理异步逻辑时，redux-thunk 也就成为了不少开发者的选择。但是，当应用逻辑变得更加复杂时，redux-thunk 可能会带来一些问题，例如状态管理不当、逻辑聚合不明确，引起代码维护困难等等。因此，本文将为大家介绍一款封装了更为强大且易于维护的异步处理逻辑的 npm 包：redux-managed-thunk。
安装
在使用 redux-managed-thunk 之前，你需要在你的项目中安装该 npm 包：
--- ------- ------------------- ------
或者使用 yarn：
---- --- -------------------
使用示例
创建 action
在 redux-managed-thunk 中，我们需要使用 managedThunk 函数来创建一个异步 action，使用方法如下：
------ - ------------ - ---- ----------------------
------ ----- --------- - --------------
---------- -------
----------- ------------
---------- ----- -- -------- -- -- -
----- ------ - ----- ------------------------------------------------------
----- ---- - ----- --------------
---------- ----- --------------------- -------- ---- ---
------ -----
--
---在上面的例子中，我们首先通过 managedThunk 函数创建了一个异步 action fetchUser，其中：
namespace属性用于标识当前异步 action 的名字空间，可选。actionType属性用于标识当前异步 action 的 actionType，必填。operation属性表示异步请求的主逻辑，必填。
异步 action 的主逻辑可包含以下参数：
dispatch：用于派发 action 的函数。getState：用于获取当前状态的函数。getNamespace：用于获取指定名字空间下的状态的函数。
将 action 与 reducer 关联
在使用 redux-managed-thunk 时，我们需要将异步 action 与 reducer 关联起来，以保证状态的处理。我们可以使用 managedThunkReducer 函数来完成这一关联，使用方法如下：
------ - --------------- - ---- --------
------ - ------------------- - ---- ----------------------
------ - ------------------ - ---- --------------
----- ----------- - ------ - --- ------- -- -
------ ------------- -
---- -------------------
------ - --------- ----- -------------- --
--------
------ ------
-
--
------ ------- -----------------
----- --------------------------- -------------
---在上面的例子中，我们首先使用 combineReducers 函数将 reducer 组合起来。然后，我们使用 managedThunkReducer 函数来完成异步 action 与 reducer 的关联，其中：
namespace属性用于指定当前异步 action 的名字空间。reducer属性为当前异步 action 关联的 reducer 函数。
最后，我们可以像普通的 reducer 一样处理状态的更新。
在组件中使用
在组件中使用异步 action 时，我们需要在 mapDispatchToProps 函数中将 action 与 dispatch 绑定起来，使用方法如下：
------ - --------- - ---- ------------
----- ---- ------- --------------- -
------------------- -
----- - --------- - - -----------
------------
-
-------- -
----- - ---- - - -----------
------ -
-----
--------------------
-------------------
------
--
-
-
----- --------------- - ----- -- -
------ -
----- ----------------
--
--
----- ------------------ - -
----------
--
------ ------- ------------------------ --------------------------在上面的例子中，我们首先通过 mapDispatchToProps 函数将 fetchUser action 与 dispatch 绑定起来。然后在组件的 componentDidMount 生命周期函数中，我们可以调用 fetchUser 来触发异步请求。最后，我们通过 mapStateToProps 函数将异步请求的结果与组件的 props 关联起来，以供组件使用。
总结
redux-managed-thunk 相对于 redux-thunk 有着更为灵活、易于维护的优点。通过本文的介绍，相信大家已经对它有了初步的了解。当然，你可以通过官方文档进一步了解它的更多特性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065b40c6eb7e50355dbc8c