在使用 Redux 进行状态管理时，如果有一些异步的操作需要进行，就需要用到一种称为“中间件”的东西。其中最常用的是 Redux-Thunk 中间件。本文将深入探讨 Redux-Thunk 中间件，包括其作用、如何使用以及示例代码。希望能够对前端开发者有帮助。
Redux-Thunk 是什么？
Redux-Thunk 是 Redux 官方推荐的一款中间件，它允许我们编写 action creator 函数，这些函数不再返回一个 action 对象，而是返回一个函数。
这个函数可以接收两个参数：dispatch 和 getState。dispatch 方法可以用来发送 action，而 getState 方法可以用来获取当前的 state。
下面是一个示例 action creator 函数：
-- -------------------- ---- -------
-------- -------------- -
------ ------------------ -
------------------------- -- ---- ---------------
------ ----------
-------------- -- ----------------
---------- -- -
------------------------------- -- ---- -------------
--
------------ -- -
----------------------------- -- ---- -------------
---
--
-可以看到，fetchData 函数返回了一个函数，这个函数接收一个 dispatch 参数，并在请求成功或失败时分别发送了相应的 action。
Redux-Thunk 的作用
Redux-Thunk 的作用可以总结为以下几点：
- 允许 action creator 返回一个函数，而不是一个 action 对象。
- 在这个函数中可以进行异步操作，例如发送网络请求。
- 在异步操作完成后，可以再次发送一个 action，来改变 state 中的数据。
因此，Redux-Thunk 是处理异步操作的不二选择。
Redux-Thunk 的使用
使用 Redux-Thunk 中间件需要先安装：
npm install redux-thunk
然后，在创建 store 时，通过 applyMiddleware 函数来应用中间件：
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(thunk));接下来，我们就可以编写 action creator 函数了。这些函数可以返回一个函数，并在异步操作完成后再次发送一个 action。
Redux-Thunk 的示例代码
下面来看一个具体的示例。
假设我们的应用需要从服务器请求一个列表数据，该列表数据需要展示在页面上。
首先，我们需要编写一个 reducer，用来处理接收到的 action：
-- -------------------- ---- -------
----- ------------ - -
----- ---
-------- ------
------ -----
--
-------- ----------------- - ------------- ------- -
------ ------------- -
---- -------------------
------ -
---------
-------- -----
------ -----
--
---- ---------------------
------ -
---------
-------- ------
----- ---------------
--
---- ------------------
------ -
---------
-------- ------
------ ---------------
--
--------
------ ------
-
-可以看到，我们定义了三个 action 分别表示开始请求数据、请求成功和请求失败。在 reducer 中，根据不同的 action 类型，来改变 state 中的数据。
接下来，我们需要编写 action creator 函数：
-- -------------------- ---- -------
------ ----- --------- - --- -- -
------ ----- -------- -- -
---------- ----- ------------------ --- -- --------- ---------------
--- -
----- -------- - ----- -----------
----- ---- - ----- ----------------
---------- ----- --------------------- -------- ---- --- -- ---------- --------------
- ----- ------- -
---------- ----- ------------------ -------- ----- --- -- ---------- -------------
-
--
--可以看到，这个 action creator 函数返回了一个函数。在这个函数中，我们使用了 async/await 来发送网络请求，并在请求成功或失败时发送相应的 action。
最后，在页面中使用这个 action creator 函数：
-- -------------------- ---- -------
------ - --------- - ---- ------------
-------- ----- -
----- -------- - --------------
------------ -- -
---------------------------------------------------
-- ----
------ -
-----
--- ---- ---
------
--
-在页面中，我们可以使用 useDispatch Hook 来获取 dispatch 方法并调用 fetchData 函数来请求数据。如果请求成功，相应的数据将会显示在页面上。
结论
Redux-Thunk 是 Redux 中应用最广泛的中间件，它的主要作用是用来处理异步操作。使用 Redux-Thunk 可以编写 action creator 函数来发送网络请求等异步操作，并在操作完成后发送相应的 action，来改变 state 中的数据。通过本文的介绍，相信大家已经对 Redux-Thunk 有了更深入的了解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b0ae1a48841e9894cc43c1