简介
redux-middleware-oneshot 是一个 Redux 中间件包,其功能为让 action creators 只会派发一次 action。这种设计常常用于处理一些需要即使多次调用 action creators,但只需分发一次 action 的场景。
安装
通过 npm 安装:
npm install redux-middleware-oneshot --save
使用
首先,在 Redux store 中引用 middleware:
import { createStore, applyMiddleware } from 'redux'; import oneshot from 'redux-middleware-oneshot'; import reducers from './reducers'; const store = createStore( reducers, applyMiddleware(oneshot) );
接着,在需要使用 oneshot 功能的 action creators 中,添加 oneshot 标记:
function myAction() { // ... } myAction.oneshot = true;
现在,当多次使用 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