Redux是现在前端开发中最流行的状态管理工具之一，它的流程和设计使得在大型应用程序的开发中变得更加容易和有逻辑。redux-via这个npm包为我们提供了使用Redux当中异步操作的一个简化方案，这大大简化了异步操作代码的书写。
安装
首先，我们需要确定项目已经依赖Redux并安装基本的redux-via包:
npm install --save redux redux-via
使用方法
当我们需要使用redux-via的时候，首先我们需要在创建Redux store时对redux-via进行初始化操作。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ -------------------- ---- ------------- ------ -------------- ---- ------------ ------ ----------- ---- ------------- ------ - ----------- - ---- ------------------ ----- -------------- - ----------------------- ----- - ----------- --------- ---------------- - - ---------------------------- ----- ----------- - ------------------------------- ------------ ----- ----- - ------------------------ -----------------------------------------
插件的定义
在redux-via使用之前，我们需要定义一些特定的钩子函数和他们的行为。具体来说，我们需要定义以下三个方法：
-- -------------------- ---- -------
----- ----------- - -
----- ------- ----- -- -
-- ---- ------ --- -------- --- ---- ----
--
----- ------- ------- -- -
-- ------ ------ ---------- --- - ----- --- --- ------ -------- ------
--
------- ------- ----- -- -
-- ------ --------- --- -------- --- ---- ----
-
--在上述例子当中，我们可以看到有几个定义即将使用的redux-via钩子函数，但这个时候，它们并没有被赋予任何功能。现在，我们只需要为他们添加一些实际操作即可。
在React组件当中使用的实例
以下是一个基于redux-via的React组件示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------------ - ---- --------
------ - ------- - ---- --------------
------ - ----------- - ---- ------------------
------ - ---------- - ---- ------------
----- ----------- ------- --------- -
------------------ -
-------------
---------- - -
----------- --
--
-
------------ - ------- -- -
--------------- ----------- ------------------ ---
-
----------- - -- -- -
----- - ---- - - -----------
----- - ---------- - - -----------
-------------------- - -------- ---------- ---
-
-------- -
----- - ---------- - - -----------
------ -
-----
------ ----------- ------------------ ---------------------------- --
------- -------------------------------- ------------
------
--
-
-
----- ------------------ - ---------- -- --
---------
----------- ------------------------------ ----------
---------- ----------------------------- ---------
---
------ ------- ------------- ---------------------------------现在，我们已经将插件成功地集成到了Redux store之中，同时我们也定义了一个React组件来操作这个插件。注意到组件中的 myViaPlugin的import, 在这里，我们将使用该对象来定义一些APIurl，当调用props.call函数时会在这个对象之中搜索匹配的url并执行相应的操作。
在之前的代码中, 我们也使用redux-via定义好的action creators，我们将他们使用 bindActionCreators()进行绑定并传递到了React组件当中便于调用。这些action creators具有以下的功能：
viaActions:call(url: string, args: Object)发送指定的数据到一个特定的url当中，它将会执行定义的myViaPlugin.call()方法。viaActions:take(url: string)从一个特定的URL事件之间进行监听，他将会执行定义的myViaPlugin.take()方法。viaActions:cancel(url: string, args: Object)对于特定url的加入队列操作进行取消，他将会执行定义的myViaPlugin.cancel()方法。
总结
redux-via这个npm包可以使Redux异步操作更加方便和易于管理。在这篇文章当中，我们开发并集成了一个自定义的插件，该插件可以在Redux store中集成，进而操作我们在React组件当中定义好的APIurl.
现在，我们只需要关注React组件和API的定义，所有与redux-async等中间件有关的琐碎操作均由redux-via包处理了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067012e361a36e0bce8da9