简介
redux-throttle-actions是一个可以节流 Redux Action 的库，根据指定的时间间隔将 Action 合并，从而达到减少网络请求的效果，提高代码性能。
本文将介绍该库的安装、使用及其相关配置。
安装
首先，我们需要使用npm或yarn安装该库：
npm install redux-throttle-actions
或者
yarn add redux-throttle-actions
使用方法
改写reducer
通过Redux的reducer机制，我们可以将redux-throttle-actions集成到应用程序中。
-- -------------------- ---- ------- ------ - ----------- - ---- ------- ------ -------- ---- ------------------------ ----- ------- - ------- ------- -- - -- --- - ----- ---------------- - ----------------- ----- -------------------- ----- ----- - -----------------------------
上面的代码中，我们通过throttle（reducer，1000）将reducer函数转换为新的函数，返回新的频率受限版本。
定义actionCreator
web应用程序通常通过将对象（称为 “action”）来更新应用状态的。actions 本质上是一个普通对象。我们通常用函数，称为 action creators，来生成这些对象。
使用redux-throttle-actions，我们可以定义一个盛装 actionsCreators 的对象，然后将其传递给 createActions，可以自动生成被节流功能包装过的 actionCreators。
import { createActions } from 'redux-throttle-actions'
const actions = createActions({
getUserInfo: (params) => ({ type: 'getUserInfo', payload: params }),
}, 1000) // 每隔1000ms，触发一个 getUserInfo的action
const { getUserInfo } = actions绑定action到组件
使用了redux-throttle-actions，我们需要将actionCreators替换为被节流的actions。
const mapDispatchToProps = (dispatch) => ({
getUserInfo: (params) => dispatch(actions.getUserInfo(params)), // replace actionCreators to throttled ones
})示例代码
下面是一个例子：
-- -------------------- ---- -------
------ - ----------- - ---- -------
------ - ------------- - ---- ------------------------
----- ------- - ------ - --- ------- -- -
------ ------------- -
---- -------------- -
------ -
---------
--------- --------------- -- -- ---- --
-
-
-------- -
------ -----
-
-
-
----- ---------------- - ----------------- ----- -- ------------ ------------------
----- ----- - -----------------------------
----- ------- - ---------------
------------ -------- -- -- ----- -------------- -------- ------ ---
-- -----
----- - ----------- - - -------
----- ------------------ - ---------- -- --
------------ -------- -- -------------------------------------- -- --------------- -- --------------
--
----- ------------- - -- -- -
------ -
-----
------- ----------- -- ----------------- -------
--- --------
---------
------
-
-总结
通过本文的介绍，我们了解了如何利用redux-throttle-actions限制Action的频率，以提高web应用程序的性能。通过节流的方案，我们可以更好地控制Action的数量，在保证状态流程的正确性下优化性能。
当我们需要使用redux-throttle-actions时，我们需要先定义throttle版本的 reducer，并使用throttle包装我们的actions，把throttled actions绑定到UI组件上以此结束Action的频繁调用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8cd2