Redux-loop 是一个使用 JavaScript 的 Redux 状态管理库，其主要特性是使用者可以以更加语义化的方式来定义 Redux 中的异步操作。@mazechazer/redux-loop 是 Redux-loop 的一个优秀实现，它封装了一些非常便利的辅助函数和中间件，以帮助使用者更加方便地在 Redux 中使用 Redux-loop。本文将详细介绍 @mazechazer/redux-loop 的使用方法，并给出一些示例代码。
安装
在你的项目中，你需要先安装 Redux 和 redux-loop：
--- ------- ----- ----------
接着，你可以安装 @mazechazer/redux-loop，使用如下命令：
--- ------- ----------------------
安装成功后，我们就可以开始使用 @mazechazer/redux-loop 了。
基本使用
@mazecharer/redux-loop 为我们提供了一个 loop 函数，我们可以使用这个函数来定义 Redux-loop 的行为，它接受三个参数：
model：Redux 的 model，也就是我们需要管理的状态。effect：指定我们的操作所需要进行的异步任务，可以是 Promise 或 Observable。command：它是一个函数，用于封装整个操作的过程，我们可以在这个函数中进行一些额外的操作，并返回一个 effect。
下面让我们来看一个例子：
------ - ----- --- - ---- -------------------------
----- ------------ - - ------ - --
------ -------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ ------ ------ ----------- - - -- ----------
---- ------------
------ ------ ------ ----------- - - -- ----------
---- ------------------
------ -----
- ------ ----------- --
------------------ -
--------------------- -------- -- --
----- ------------
-------- - ------ --
---
--
--
--------
------ ------
-
-
-------- ----------- -
------ --- ----------------- -- -
------------- -- -
----------
-- ------
---
-在上面的代码中，我们定义了一个 Redux 的 reducer，它拥有三种不同的行为：INCREMENT、DECREMENT 和 INCREMENT_ASYNC。
当 INCREMENT 和 DECREMENT 被触发时，我们会分别增加和减少计数器中的数字。
而当触发 INCREMENT_ASYNC 时，我们会进行一个异步操作（Cmd.run(fakeDelay)），该异步操作会在两秒之后将结果分发为“INCREMENT”操作的 payload。
在上面的例子中，我们并没有用到 command，因为我们不需要进行任何样板操作。
如果你想使用 command，你可以这样写：
------ - ----- --- - ---- -------------------------
----- ------------ - - ------ - --
------ -------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ ------ ------ ----------- - - -- ----------
---- ------------
------ ------ ------ ----------- - - -- ----------
---- ------------------
------ -----
- ------ ----------- --
------------------------
----------
-------- -- -- ----- ------------ -------- - ------ - ---
------- -- -- ----- -------- ----- --
-
--
--------
------ ------
-
-
-------- ----------- -
------ --- ----------------- -- -
------------- -- -
----------
-- ------
---
-在上面的代码中，我们使用了 Cmd.runWithInterruption，它与 Cmd.run 的区别在于，当它的前一个异步任务尚未完成时，它就会被打断。
bindActionCreators 函数
通常情况下，将 Cmd 放在 Redux 的行动中并不是一个特别方便的过程。因此，@mazechazer/redux-loop 提供了一个另外的方式来绑定 Redux 的行动：
------ - ------------------ - ---- -------------------------
----- - ---------- --------- - - -------------------
-
---------- -- -- -- ----- ----------- ---
---------- -- -- -- ----- ----------- ---
--
--------
--如果有多个绑定函数，则可以像下面一样使用：
------ - ------------------ - ---- -------------------------
----- -
----------
----------
---------------
---------------
- - -------------------
-
---------- -- -- -- ----- ----------- ---
---------- -- -- -- ----- ----------- ---
--------------- -- -- --
----- ------------------
-------- - -------- ------------------- --
---
--------------- -- -- --
----- ------------------
-------- - -------- ------------------- --
---
--
--------
--这样我们就可以在应用中方便地使用 Redux-loop。
结论
@mazecharer/redux-loop 的使用方法很简单，你可以看到我们只需关注 model、effect 和 command 三个参数就可以了。我们可以使用 loop 函数将这些参数组合在一起来实现 Redux-loop 的行动。除此之外，该库还提供了许多帮助函数，可以更加方便地在 Redux 中使用 Redux-loop。
如果你对 Redux-loop 感兴趣，那么 @mazecharer/redux-loop 绝对是一个值得尝试的选择。该库提供了丰富的功能和辅助函数来帮助你使用 Redux-loop，我们相信你一定会感觉到非常便利。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056bcc81e8991b448e56fb