npm 包 redux-middleware-oneshot 使用教程

阅读时长 4 分钟读完

简介

redux-middleware-oneshot 是一个 Redux 中间件包,其功能为让 action creators 只会派发一次 action。这种设计常常用于处理一些需要即使多次调用 action creators,但只需分发一次 action 的场景。

安装

通过 npm 安装:

使用

首先,在 Redux store 中引用 middleware:

接着,在需要使用 oneshot 功能的 action creators 中,添加 oneshot 标记:

现在,当多次使用 myAction() 时,只会派发一次 action。

实现细节

redux-middleware-oneshot 通过一个 JavaScript Map 对象来维护 action creators 和已派发 actions 的映射关系。这个 Map 对象在创建 store 实例时,作为 middleware 的 options 传入。当一个 action creator 被调用时,middleware 会检查该 action creator 是否已被添加到 Map 对象中。

如果 action creator 尚未被添加到 Map 对象中,middleware 会执行它,并将其添加到 Map 对象中。同时,middleware 会返回一个包装过的函数,该函数只会执行一次,且后续调用不再产生副作用。

如果 action creator 已存在于 Map 对象中,则 middleware 会将上一个 action 的 Promise 对象返回给当前调用者,以防止该 action 被多次派发。

示例代码

下面是一个使用 redux-middleware-oneshot 的示例代码:

-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ------- ---- ---------------------------

----- -------- - -- -- -
  ------ -
    ----- ------------
    -------- -
      ----- ---------
    -
  -
-
---------------- - -----

----- ------- - ------ - --- ------- -- -
  ------------------- -
    ---- ------------
      --------------- ------ ----------- ----------------
      ------ -
        ---------
        ----- --------------
      --
    --------
      ------ ------
  -
--

----- ----- - -------------------- --------------------------

------------------ -- ------------------ ---------- -------------------

---------------------------
---------------------------
-- ---- --- --------- ----------

在上面的代码中,我们定义了一个名为 myAction 的 action creator,并将其添加了一个 oneshot 标记。然后,我们将该 action creator 传递给 redux 的 dispatch 方法两次。由于我们已经添加了 oneshot 标记,只会派发一次 MY_ACTION。

总结

通过使用 redux-middleware-oneshot 可以方便地实现多次调用 action creators,但只需分发一次 action 的功能。希望这篇使用指南能够帮助你更好地理解和使用 redux-middleware-oneshot。如果你在使用过程中遇到了问题,欢迎在评论区留言。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b30

纠错
反馈