简介
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