概述
Redux-thunk 是一个 Redux 中间件，用来处理异步 Action，其主要原理是在发出 Action 和执行 Reducer 的过程中插入一个异步的函数来进行操作。
本文将深入探讨 Redux-thunk 中间件的使用和原理，并给出一些示例代码来帮助读者更好地理解。
Redux-thunk 中间件的用法
使用 Redux-thunk 中间件十分简单，只需要在创建 store 时将中间件传入即可。以下是代码示例：
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(thunk));接下来，我们会使用一个具体的案例来演示如何使用 Redux-thunk 中间件处理异步 Action。
异步获取数据
假设我们需要在 Redux 中存储一个用户信息的对象。为了获取这个对象，我们需要发送一个 HTTP 请求到服务器端，等待服务器返回数据后再进行存储。
以下是使用 Redux-thunk 处理这个异步 Action 的代码示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ------------- - -- -- -
------ -------- -- -
---------------------------------
--------------------------
--------- -- -
-----------------------------------------
--
---------- -- -
--------------------------------------------
---
--
--
----- -------------------- - -- -- -
------ -
----- ------------------------
--
--
----- -------------------- - -------- -- -
------ -
----- -------------------------
-------- --------
--
--
----- -------------------- - ----- -- -
------ -
----- -------------------------
-------- -----
--
--在上面的代码中，我们定义了一个名为 fetchUserInfo 的异步 Action，它返回的是一个函数。当这个 Action 被调用时，Redux-thunk 会执行这个函数，并将 dispatch 和 getState 两个函数作为参数传入。
在这个函数中，我们首先发起一个 HTTP 请求，请求的 URL 为 /api/userInfo。如果请求成功，我们会调用 fetchUserInfoSuccess Action，将返回的数据作为参数传入。如果请求失败，我们会调用 fetchUserInfoFailure Action，将错误信息作为参数传入。
在以上过程中，我们还调用了 fetchUserInfoRequest Action，它的作用是通知 Redux store，我们正在等待服务器返回结果。
当我们需要获取用户信息时，只需要在组件中调用 fetchUserInfo 函数即可，例如：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - ------------- - ---- ------------
----- --- - -- -- -
----- -------- - ----------------- -- ----------------
----- -------- - --------------
------------ -- -
--------------------------
-- ----
------ -
-----
----------------------------
-----------------------
------
--
--
------ ------- ----在以上代码中，我们使用 useSelector Hook 从 Redux store 中获取到用户信息。由于我们是异步获取数据的，因此需要等待数据获取成功后再将其渲染到页面上，这里我们使用 useEffect Hook 来实现。在组件初始化时，我们会调用 fetchUserInfo 函数，发起获取数据的请求。
Redux-thunk 的原理
在 Redux 应用中，任何事情都必须以 Action 开始。但是，Redux 中的 Action 只能是一个普通的 JavaScript 对象，它不能包含异步操作。这时就需要 Redux-thunk 中间件的帮助。
Redux-thunk 中间件让 Action 创建函数可以返回一个函数代替一个对象。可以将异步代码在返回函数中处理，同时在合适的时间派发一个同步 Action。
当我们在组件中调用一个返回函数的 Action 创建函数时，Redux-thunk 会拦截这个 Action，将 dispatch 和 getState 函数传入这个函数。这样，我们就可以在这个函数中执行异步代码，并在合适的时候手动调用 dispatch 函数，将同步 Action 传递给 Reducer。
以下是 Redux-thunk 中间件的源码：
-- -------------------- ---- -------
-------- ------------------------------------ -
------ -- --------- -------- -- -- ---- -- ------ -- -
-- ------- ------ --- ----------- -
------ ---------------- --------- ---------------
-
------ -------------
--
-
----- ----- - ------------------------
----------------------- - ----------------------
------ ------- ------在以上代码中，我们可以看到，Redux-thunk 中间件实际上是一个返回函数的函数。这个返回函数接受一个 dispatch 函数和一个 getState 函数作为参数，并返回另一个函数作为 Redux 中间件的 next 参数。
当我们派发一个 Action 时，中间件会调用插入的函数。这个插入的函数可以是一个同步的 Action 创建函数，也可以是一个异步函数。
当我们派发一个函数类型的 Action 时，中间件会直接将这个函数调用，并将 dispatch 和 getState 函数作为参数传入。当这个函数返回一个值时，中间件会将这个值直接作为下一个中间件或 Reducer 的参数进行处理。
当我们派发一个对象类型的 Action 时，中间件会将这个 Action 传递给下一个中间件或 Reducer 进行处理。如果插入的函数返回的是一个函数类型的 Action 创建函数，中间件会将这个函数重新进行处理。
结论
Redux-thunk 中间件是 Redux 应用中用来处理异步 Action 最常用的中间件之一。它能简化异步操作的流程，使我们可以在 Action 中直接进行异步操作，并使用 Reducer 处理返回的数据。
通过深入解析 Redux-thunk 中间件的原理，我们不仅可以更好地应用它到实际应用中，还能了解到 Redux 应用的核心原理。
希望这篇文章能对你理解 Redux-thunk 中间件的使用和原理有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6714776dad1e889fe213eec8