Redux 是一个非常流行的 JavaScript 应用状态管理工具。Redux 的主要目的是使得 JavaScript 应用程序的管理变得更加容易和可预测。其中一个关键概念是 Redux 的事件机制。Redux 状态的更新始终是通过事件发生，这个事件会传递到一个函数中，这个函数会根据事件的类型，改变应用的状态。
Redux 的事件机制是同步的，而有些情况下我们需要使用异步操作来处理数据。在这篇文章中，我们将介绍 Redux 中的异步调用实现技巧，包括如何使用中间件来实现异步调用和如何在 React 应用程序中使用 Redux 异步调用的最佳实践。
Redux 异步调用的中间件
Redux 的核心是 reducer 函数，这个函数用来处理应用程序状态的更新。reducer 函数接受两个参数，分别是应用程序当前状态和一个表示状态更新的事件，这个函数必须返回一个新的应用程序状态。虽然这个机制提供了一种简单的方式来管理应用程序状态，但是它不能处理异步操作。
Redux 通过中间件来解决这个问题。中间件是一些函数，它们可以拦截 Redux 的事件，并在事件处理之前进行一些操作，比如发送请求，等待响应，再将响应结果传递给 reducer 函数。这个过程是异步的，因此我们可以在等待响应的同时，让应用程序继续执行其他操作。
Redux 中的中间件可以使用自定义或第三方模块实现，其中最流行的两个是 Redux-Thunk 和 Redux-Saga。在这篇文章中，我们将使用 Redux-Thunk 来实现 Redux 异步调用的中间件。
Redux-Thunk 的基本用法
Redux-Thunk 允许我们将 action creator 转换成具有异步调用功能的函数。这些函数不直接返回 action 对象，而是返回另一个函数，这个函数接受一个 dispatch 参数，并通过 dispatch 发送一个 action 对象。这个机制使得我们能够在 action creator 函数中执行异步操作。
下面是一个简单的 Redux-Thunk 示例：
------ - ------------ --------------- - ---- --------
------ --------------- ---- --------------
----- ------------ - -
---------- ------
----- -----
------ ----
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ---------------------
------ - --------- ---------- ---- --
---- ---------------------
------ - --------- ---------- ------ ----- -------------- --
---- ---------------------
------ - --------- ---------- ------ ------ -------------- --
--------
------ ------
-
--
----- --------- - -- -- -
------ -------- -- -
---------- ----- -------------------- ---
------------------
-------------- -- ----------------
---------- -- ---------- ----- --------------------- -------- ---- ---
------------ -- ---------- ----- --------------------- -------- ----- ----
--
--
----- ----- - -------------------- ----------------------------------
----------------------------在这个示例中，我们首先定义了一个 reducer 函数，它会接受三种类型的事件，分别是 FETCH_DATA_REQUEST、FETCH_DATA_SUCCESS 和 FETCH_DATA_FAILURE。这个函数会根据这些事件，更新应用程序的状态。
然后我们定义了一个 fetchData 函数，它返回一个函数，这个函数接受一个 dispatch 参数，并在这个函数内部执行了异步操作。首先发送了一个 FETCH_DATA_REQUEST 事件，表示数据正在加载中。然后发送了一个 fetch 请求，获取后端 API 的数据。如果请求成功，就发送一个 FETCH_DATA_SUCCESS 事件，并将获取到的数据作为 payload。如果请求失败，就发送一个 FETCH_DATA_FAILURE 事件，并将错误作为 payload。
最后我们使用 applyMiddleware 来将 Redux-Thunk 应用到 store 中，并调用 store.dispatch(fetchData()) 来触发 fetchData 函数。
在 React 应用程序中使用 Redux-Thunk
我们已经了解了 Redux-Thunk 的基本用法。现在我们来看看在 React 应用程序中如何使用 Redux-Thunk 的最佳实践。
首先，在 React 应用程序中使用 Redux，我们需要将 Redux 状态存储在一个单一的 store 中。这个 store 可以被应用程序中的所有组件访问。因此，我们在应用程序的入口处（比如 index.js）创建了一个 store，然后使用 Provider 组件将 store 注入到 React 应用程序中。
------ - ------------ --------------- - ---- --------
------ --------------- ---- --------------
------ - -------- - ---- --------------
------ ----------- ---- -------------
------ --- ---- --------
----- ----- - ------------------------ ----------------------------------
----------------
--------- --------------
---- --
------------
-------------------------------
--在这个示例中，我们首先导入了 createStore、applyMiddleware、Provider 和 rootReducer。createStore 和 applyMiddleware 是 Redux 提供的创建 store 和应用中间件的函数，rootReducer 是应用程序的根 reducer 函数，它会接受所有的状态更新事件，并将它们转换成应用程序的新状态，App 是应用程序中的主组件。
然后，我们创建了一个 store，将 rootReducer 和 applyMiddleware 应用到 store 中。最后，我们使用 组件将 store 传递给所有应用程序中的组件。
接下来让我们看看如何在 React 应用程序中使用 Redux-Thunk。
在组件中使用异步调用
让我们假设我们的应用程序中有一个组件，它需要调用后端 API 来获取数据，并将这些数据渲染到前端页面上。我们可以在这个组件中使用 Redux-Thunk。
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - --------- - ---- -------------
----- --------- - -- -- -
----- -------- - --------------
----- - ---------- ----- ----- - - ----------------- -- ------------
------------ -- -
----------------------
-- ----
-- ----------- -
------ ----------------------
-
-- ------- -
------ ----------- ----------------------
-
------ -
-----
-------------- -- -
---- --------------
---------------------
------------------
------
---
------
--
--
------ ------- ----------在这个示例中，我们首先导入了 useEffect、useDispatch 和 useSelector。useEffect 是 React 的一个 Hook，它可以在组件挂载和更新之后执行一些操作。useDispatch 是 Redux 的一个 Hook，它可以在组件中使用 Redux store 的 dispatch 方法。useSelector 是 Redux 的另一个 Hook，它允许我们从 Redux store 中选择某些状态。fetchData 是一个 action creator 函数，它返回一个函数，这个函数是一个异步操作，可以使用 Redux-Thunk。
然后我们在组件内部定义了 dispatch 和 { isLoading, data, error } 三个状态，分别表示加载状态、数据、错误状态。useEffect 钩子在组件挂载之后调用了 dispatch(fetchData()) 函数，触发了 fetchData 函数的执行。fetchData 函数会发送一个异步请求，获取后端 API 的数据，并在请求结束之后调用 dispatch 方法，触发数据更新。
接下来，我们检查 isLoading 和 error 状态，如果请求正在进行中，就渲染 "Loading..." 文字，如果请求发生了错误，就将错误状态渲染出来。否则，我们将 data 映射到一个 div 列表中，并在列表中渲染数据的标题和正文。
结论
Redux 是一个非常强大和流行的状态管理工具，而 Redux-Thunk 是一个非常实用的中间件，它允许我们在 Redux 中执行异步操作。在本文中，我们学习了 Redux-Thunk 的基本用法和如何在 React 应用程序中使用 Redux-Thunk。最后，我们展示了如何在组件中使用异步操作，以及如何将异步操作的结果与 React 组件的状态集成。如果你正在开发一个大型的 JavaScript 应用程序，Redux 和 Redux-Thunk 肯定会成为你的首选工具。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67133738ad1e889fe20b45e3