Redux是一个广泛使用的JavaScript状态容器库，而thunk则是Redux中最常用的中间件之一。它允许您使用函数而不是对象来分发actions，并能解决异步操作中的回调地狱问题。此外，我们还可以通过使用redux-debounce-thunk包使thunk变得更加高效和可控。
在本文中，我们将学习如何使用redux-debounce-thunk包来处理在 Redux 应用程序中使用 debounce 函数的情况。无论您是正在开发Redux应用程序还是准备开始构建应用程序，此教程应该会对您有所帮助。
什么是Debouncing
在我们深入研究redux-debounce-thunk之前，让我们先了解一下什么是防抖操作（debouncing）。在JavaScript编程中，防抖操作意味着我们可以控制某些事件的发生时间，以便我们可以更好地控制应用程序的行为。
例如，在搜索框中键入文本搜索时，您不希望用户每次键入字符时都会触发一个API调用，而应该是等到用户停止输入一段时间后再进行API请求，这样可以减轻服务器端的负担，并提供更好的用户体验。这就是防抖操作的用途之一。
什么是Redux Debounce Thunk
redux-debounce-thunk是一个非常小的npm包，旨在帮助您使用redux-thunk处理异步操作时添加一个防抖操作。redux-debounce-thunk只有一个文件debounce.js，它处理异步操作中的延迟执行，以确保我们得到满意的结果。
让我们看看如何使用redux-debounce-thunk进行防抖操作并掌握使用该包的步骤。
步骤1：安装依赖包
首先，我们需要在我们的项目中安装redux-debounce-thunk。该包已经发布在npm上，可以通过以下命令安装：
npm install --save redux-debounce-thunk
步骤2：创建Redux Action
我们现在将创建一个Redux action，并使用redux-thunk中间件来触发异步API调用。这是我们的action文件：
-- -------------------- ---- -------
------ - -- ----- ---- ---------------------------
------ ----- ---- --------
------ ----- --------- - ----------- ------------ - ---- -- -
------ ----- -------- ---------- -
-------------------------
--- -
----- -------- - ----- ----------
--------------------------------------------------------------
--
-- ---------------- --- ---- -
----- ----- - --------------
----------------------------------
-
- ----- ------- -
------------------------------
----- ------
-
--
--
------ ----- ------------ - -- -- -
------ - ----- -------------------- --
--
------ ----- ------------ - ------- -- -
------ - ----- --------------------- ----- --
--
------ ----- ---------------- - ------- -- -
------ - ----- ------------------------- ----- --
--我们的action中会调用 axios.get() 方法来获取用户列表。 在此示例中，我们将搜索关键字作为参数传递给该方法，以搜索特定用户。 我们允许用户通过将第二个参数传递至loadUsers() 方法来设置停顿时间。
步骤3：创建Redux Middleware
我们需要创建中间件，以便在我们的应用程序中使用redux-debounce-thunk。在这个中间件中，我们将包装我们的异步操作并添加一个防抖函数。
以下是debounceMiddleware.js：
-- -------------------- ---- -------
------ -------- ---- -----------------------
------ ----- ------------------ - --
---------
---------
-- -- ---- -- ------ -- -
------ -----
------ ------ --- ----------
- ----------------
- -------
--
--我们的中间件将我们的异步操作包装在一个 debounce() 方法中。 dispatch() 函数允许我们在我们的中间件中传递多个action。 我们只需要返回发起异步操作的action并使用应用redux-debounce-thunk及其功能即可。
步骤4：将Middleware添加到Redux Store
最后，我们需要将我们的中间件添加到 Redux store 的 applyMiddleware()方法中。您可以像这样添加中间件：
-- -------------------- ---- -------
------ - ------------ ---------------- ------- - ---- --------
------ ----------- ---- -------------
------ - ------------------ - ---- ----------------------------------
------ ---------------------------- ---- ----------------------------------
------ ----- ---- --------------
------ ------- -------- ---------------------------- -
----- ---------------- -
------------------------------------------- -- --------
------ ------------
------------
-------------
-----------------
---------------------- ------------------- -------------------------------
-
--
-我们一起使用了redux-thunk和redux-debounce-thunk，我们不同之处在于在这里添加的函数名称是“ debounceMiddleware”。
现在，我们已经成功创建了一个Redux action，添加了一个Redux middleware并将其添加到Redux store中。 我们使用loadUsers() 触发搜索操作的action，并为该函数设置了一个停顿时间。
示例代码
现在，让我们看看完整的示例代码。 这是我们的Redux action文件。
-- -------------------- ---- -------
------ - -- ----- ---- ---------------------------
------ ----- ---- --------
------ ----- --------- - ----------- ------------ - ---- -- -
------ ----- -------- ---------- -
-------------------------
--- -
----- -------- - ----- ----------
--------------------------------------------------------------
--
-- ---------------- --- ---- -
----- ----- - --------------
----------------------------------
-
- ----- ------- -
------------------------------
----- ------
-
--
--
------ ----- ------------ - -- -- -
------ - ----- -------------------- --
--
------ ----- ------------ - ------- -- -
------ - ----- --------------------- ----- --
--
------ ----- ---------------- - ------- -- -
------ - ----- ------------------------- ----- --
--这是我们的Redux middleware文件。
-- -------------------- ---- -------
------ -------- ---- -----------------------
------ ----- ------------------ - --
---------
---------
-- -- ---- -- ------ -- -
------ -----
------ ------ --- ----------
- ----------------
- -------
--
--这是我们的Redux Store文件。
-- -------------------- ---- -------
------ - ------------ ---------------- ------- - ---- --------
------ ----------- ---- -------------
------ - ------------------ - ---- ----------------------------------
------ ---------------------------- ---- ----------------------------------
------ ----- ---- --------------
------ ------- -------- ---------------------------- -
----- ---------------- - ------------------------------------------- -- --------
------ ------------
------------
-------------
-----------------
---------------------- ------------------- -------------------------------
-
--
-这是我们的应用程序的详细读取。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - --------- - ---- -------------------------
----- -------- ------- --------------- -
------------------ -
-------------
---------- - -
-------- ------
---------- ---
--
------------------- - -------------------------------
-
--------------------- -
----- --------- - -------------------
--------------- ---------- --------- -- -- -- -
--------------------------------------------------- ------
---
-
-------- -
----- - ------ --------- - - -----------
------ -
-----
---------- ----------
------
-----------
------------------------------
----------------------------
------------------- -- --------
--
--- --
--- --
---------- -- --------------------
------ --
---------------- -- -
-----
--------------------------
--- --
---------------------------
--- --
--- --
------
---
------
--
-
-
-------- ---------------------- -
------ -
------ ------------
---------- ----------------------- - --
--
-
------ ------- -----------------------------------结论
在本文中，我们通过使用npm包redux-debounce-thunk，解决了Redux中异步延迟的问题。此外，我们还了解了redux-thunk和redux-debounce-thunk，以及如何使用它们来处理异步操作。
此示例仅为介绍redux-debounce-thunk的基本概念和功能。用于处理异步action的防抖操作需要根据您的应用程序需求进行自定义。希望您对此中文技术文章有所启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b10
