前言
在前端开发中，异步请求是非常常见的场景，我们可以通过 Redux 中间件来实现异步请求的处理。其中，redux-thunk 是一个比较常用的异步 Action 插件，它可以让我们在 Action 中返回函数，而不仅仅是一个对象。
本文将介绍 Redux 异步 Action 插件 redux-thunk，包括它的作用、使用方法、示例代码和一些指导性的建议。
作用
在 Redux 中，Action 是一个对象，它描述了应用在某个时间点的状态。例如，当用户点击了一个按钮时，我们可以 dispatch 一个 Action 来更新应用中的状态。
但是，有时候我们需要进行异步请求，例如从服务器获取数据、发送网络请求等操作，这时直接 dispatch 一个 Action 就不够了，因为我们需要等待服务器响应后才能更新应用状态。
redux-thunk 的作用就是让我们可以在 Action 中返回一个函数，这个函数可以进行异步操作，例如发起网络请求或执行定时器等，完成后再 dispatch 一个 Action 来更新应用状态。
如何使用 redux-thunk
安装
npm install redux-thunk
创建 Store
在创建 Store 时，需要将 redux-thunk 中间件加入到 applyMiddleware 方法中：
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer';
const store = createStore(reducer, applyMiddleware(thunk));编写 Action
编写 Action 时，我们需要使用 redux-thunk 提供的 thunk 方法，它接收一个函数作为参数，这个函数中可以进行异步操作，例如发起网络请求等：
-- -------------------- ---- -------
------ ----- --------- - ----- -- -
------ ---------- -- -
-----------------------------
----------
---------------- -- ----------------
------------ -- -
---------------------------------
--
-------------- -- -
------------------------------------------
---
--
--
------ ----- ---------------- - -- -- -
------ -
----- ---------------------
--
--
------ ----- ---------------- - ------ -- -
------ -
----- ---------------------
-------- -----
--
--
------ ----- ---------------- - ------- -- -
------ -
----- ---------------------
-------- ------
--
--在上述代码中，我们通过 thunk 方法返回了一个函数，这个函数接收一个 dispatch 参数，用于在异步操作完成后 dispatch 一个 Action。
在组件中使用 Action
在组件中使用 Action 时，我们需要通过 connect 方法将 Action 和状态映射到组件的 props 中：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - --------- - ---- ------------
----- --- - -- ----- --------- -- -- -
------------ -- -
------------------------------------------
-- ----
------ -
-----
------------- -- ------------------
----------- -- --------- -----------------
---------- -- -------- ----------------
------
--
--
----- --------------- - ------- -- -
------ -
----- -----------
--
--
----- ------------------ - ---------- -- -
------ -
---------- ----- -- -------------------------
--
--
------ ------- ------------------------ -------------------------在上述代码中，我们通过 mapStateToProps 将状态中的 data 映射到组件的 props 中，同时通过 mapDispatchToProps 将 fetchData Action 映射到组件的 props 中，在组件挂载时调用 fetchData 方法来发起异步请求。
示例代码
在本节中，我们将编写一个小的示例代码来演示 redux-thunk 的使用效果。
首先，我们需要安装开发依赖：
npm install redux react-redux redux-thunk
然后，我们新建一个 reducer.js 文件，作为状态管理器的 reducer：
-- -------------------- ---- -------
----- ------------ - -
----- -----
-------- ------
------ -----
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ---------------------
------ -
---------
-------- -----
------ -----
--
---- ---------------------
------ -
---------
-------- ------
----- ---------------
--
---- ---------------------
------ -
---------
-------- ------
------ ---------------
--
--------
------ ------
-
--
------ ------- --------然后，我们新建一个 actions.js 文件，定义异步 Action：
-- -------------------- ---- -------
------ ----- --------- - ----- -- -
------ ---------- -- -
-----------------------------
----------
---------------- -- ----------------
------------ -- -
---------------------------------
--
-------------- -- -
------------------------------------------
---
--
--
------ ----- ---------------- - -- -- -
------ -
----- ---------------------
--
--
------ ----- ---------------- - ------ -- -
------ -
----- ---------------------
-------- -----
--
--
------ ----- ---------------- - ------- -- -
------ -
----- ---------------------
-------- ------
--
--最后，我们在 App.js 文件中使用异步 Action：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - --------- - ---- ------------
----- --- - -- ----- --------- -- -- -
------------ -- -
------------------------------------------
-- ----
------ -
-----
------------- -- ------------------
----------- -- --------- -----------------
---------- -- -------- ----------------
------
--
--
----- --------------- - ------- -- -
------ -
----- -----------
--
--
----- ------------------ - ---------- -- -
------ -
---------- ----- -- -------------------------
--
--
------ ------- ------------------------ -------------------------启动 React 应用后，我们可以看到在组件挂载时会发起一次异步请求，请求完成后在页面中展示数据。
指导性建议
统一使用异步 Action
为了更好地维护应用的状态，建议在应用中统一使用异步 Action 进行数据的获取和更新。这样做的好处是可以避免代码中逻辑混乱，让代码更加清晰易懂。
处理异步错误
在异步请求中，请求可能会失败。因此，我们需要在异步 Action 中完善错误处理，例如在出错时 dispatch 一个 Action 来更新应用状态，展示错误信息，让用户了解请求的失败原因。
避免过度使用异步 Action
虽然使用异步 Action 可以很好地处理异步请求，但是过度使用也会导致代码难以管理和维护。因此，建议在设计应用时尽量避免过多的异步请求，使应用保持简洁和易维护。
结论
本文主要介绍了 Redux 异步 Action 插件 redux-thunk，包括它的作用、使用方法、示例代码和指导性建议。通过合理使用 redux-thunk，可以让我们更好地管理应用的状态，提高代码的可维护性和读写性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670fa40a5f551281026651c7