在前端领域中，Redux是非常流行的状态管理库。它让我们可以通过单一的store来管理全局的应用程序状态。但是，我们有时想要对操作的频次、次数等进行限制。这就是redux-limiter包的作用。本篇教程将会详细介绍如何使用redux-limiter包，并提供相应的示例代码。
redux-limiter是什么？
redux-limiter是一个Redux的增强器（使用Redux的中间件机制来实现），它可以帮助你限制action的频次和次数，避免出现一些意外的问题，例如操作流的重复性和页面泄漏等。
如何安装redux-limiter？
redux-limiter是一个NPM发布的包，可以使用npm安装。
npm install --save redux-limiter
如何使用redux-limiter？
准备工作
首先，我们需要在Redux创建store的时候，对store进行一定的配置。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ----------------------- - ---- ----------------
----- ------------ - ---
-- ----------------------------------------------------
----- ----------------- - -------------------------
---------- -
-- ---------------- -----------------
------ --
--------- ---
-
---
----- -------- - ------ - ------------- ------- -- -
------ ------------- -
-- -----------
--------
------ ------
-
--
----- ----- - --------------------- ------------------------------------创建Action
有了相关的准备工作，下面我们就可以开始使用redux-limiter了。首先，我们需要为每个需要限制的action打上标记，并显式地添加到相关的动作地方。如下：
-- -------------------- ---- -------
------ ----- -------------------- - -----------
-- ---------------------
------ -------- ------------------- -
------ -
----- ---------------------
-------- -----
-- ----
----- -
-------- -
---------- -
------ --
--------- ----
-
-
-
--
-在meta中，我们通过配置参数 frequency 来定义该action的频率。
连续分发多个commit时，这种机制很有用，它可以将多个相同的commit合并到一个新的commit中。这意味着，当我们在短时间内使用多个相同的操作时，Redux的状态树只会更新一次（保证数据的一致性）
操作限制的详细设置
除了frequency，redux-limiter还提供了其他限制选项来限制action。包括：
Throttle
throttle属性将会防止用户迅速的多次单击。相当于对短时间重复的操作进行忽略。
-- -------------------- ---- -------
------ -------- ------------------- -
------ -
----- ---------------------
-------- -----
----- -
-------- -
--------- -
--------- ----
-
-
-
--
-Debounce
debounce属性有点像throttle属性，虽然两者都是为了避免用户迅速的多次单击，但是他们的处理方式是不一样的。debounce会在操作停止一定时间后才开始执行，而throttle则是直接执行当前的操作。
-- -------------------- ---- -------
------ -------- ------------------- -
------ -
----- ---------------------
-------- -----
----- -
-------- -
--------- -
--------- -----
-- -------------------
-------- ------
-- --------------------
--------- ----
-
-
-
--
-Count Throttle
countThrottle属性用来对action计数，重复的action将会被忽略。
-- -------------------- ---- -------
------ -------- ------------------- -
------ -
----- ---------------------
-------- -----
----- -
-------- -
-------------- -
------ -
-
-
-
--
-示例代码
首先是一份经典的TodoMVC代码示例，你可以在其中加入对redux-limiter的应用。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ----------------------- - ---- ----------------
-- ------ -----
----- -------- - -----------
----- ----------- - --------------
----- --------------- - ------------------
-- ------ --------
--- ---------- - --
-------- ------------------- -
------ - ----- --------- --- ------------- ---- --
-
-------- -------------------- -
------ - ----- ------------ -- --
-
-------- ----------------------- -
------ - ----- ---------------- ------ --
-
-- -------
----- ------- - -
--------- -----------
--------------- -----------------
------------ -------------
--
-- -------
-------- ------------------ - --- ------- -
------ ------------- -
---- ---------
------ -
---------
- --- ---------- ----- ------------ ---------- ----- -
--
---- ------------
------ -------------- --
------- --- --------- - - -------- ---------- --------------- - - ----
--
--------
------ ------
-
-
-------- ------------------- - ----------------- ------- -
------ ------------- -
---- ----------------
------ --------------
--------
------ ------
-
-
-- -------- --------
----- -------- - -
------ -------------
------- -------------
--
-- ----- --------------
----- ------------ - -
------ ---
------- ----------------
--
----- ----------------- - -------------------------
---------- -
------ --
--------- ---
-
---
----- ----- - ------------
------- ------- -- --
------ ------------------------- --------
------- --------------------------- -------
---
-------------
----------------------------------
--
-- ----- --------- ----
------ ----- ---- --------
------ - ------- - ---- --------------
-------- ------ -------- ---------- ---- -- -
------ -
--- -------- --------------- --------- - -------------- - ------ ---
----- -------------------------------
-----
--
-
-------- --------------- -
------ -
----
--------------------- -- -
-----
-------------
----------- -- ----------------------
--------------------------
----------------
--
---
-----
--
-
-------- ------------- -
------ -
-----
------- ---------------------- --- ----------------- ------------------------
---
---------
------- ---------------------- --- -------------------- ---------------------------
------
---------
------- ---------------------- --- ----------------------- ------------------------------
---------
---------
------
--
-
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
---------- --
--
-
------------- - --- -- -
--------------- ---------- ---------------- ---
--
-------- -
------ -
-----
------------ ------- ------ -----------
-----
------ ---------------------------- ----------------------------- --
------- ----------- -- --------------------------------------------------
------
--------- ------------------------ ------------------------------ --
-------
--------------------------
----------------------------
----------------------------------
----------------------------------------
--
------
--
-
-
-- --------------- --- ------------------
-------- ---------------------- -
------ -
------ ---------------------------- --------------
------- ------------
--
-
-------- ---------------------------- -
------ -
---- ---- -- ------------------------------
----------- -- -- -------------------------------
-------- -- -- --------------------------------------------
----------- -- -- -----------------------------------------------
-------------- -- -- -------------------------------------------------
--
-
----- -------------- - --------
----------------
------------------
-------
-- -------
-------- ---------------------- ------- -
------ -------- -
---- -----------------
------ ------
---- --------------------
------ ----------------- -- -----------------
---- -----------------------
------ ----------------- -- ----------------
--------
----- --- -------------- ------- - - --------
-
-
-- ---------
------ -------- ---- ------------
------ - -------- - ---- --------------
----------------
--------- --------------
--------------- --
------------
-------------------------------
--为了确认是否成功地对行为进行限制，在提交按钮上加入点击回调函数，我们可以看到（在不同的情况下）提示消息出现的不同。
-- -------------------- ---- -------
-- -----------
-- -------------
------- - ------ -- -
----- - -------- - - -----------
------------------------------
------------- -- -
----- - ----- - - -----------
-- ------------- --- -- -
-------- ---- ---- --- ---- ---------
- ---- -- ------------- -- -- -
---------------------- ---- --------
-
-- ------
--
-------- -
----- - ------ ------ - - -----------
------ -
-----
------------ ------- ------ -----------
-----
------ ---------------------------- ----------------------------- --
------- -----------------------------------
------
--------- ------------- ------------------------ --
-------
---------------
----------------------
----------------------------
----------------------------------
--
------
--
-结论
redux-limiter包是一种简单而有力的方式来管理action频率。它可以非常方便地避免用户的误操作和频繁操作所带来的问题。在实际使用中，你只需要将redux-limiter作为Redux中间件使用即可。同时，它也提供给了redux-limiter使用者许多灵活性设置选项，例如 frequency 和 throttle等，攻击波类型种类是否包括哪些。它可以很好地与其他Redux的中间件、工具和框架一同使用。总而言之，redux-limiter是一个不错的中间件选择，希望你也会体验到它的便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066ffee361a36e0bce8a54