当今Web开发中的前端技术变化日新月异，拥有统一且可持续的状态管理工具已经成为前端工程师的必备技能。为了使前端应用程序的管理更加可靠和可维护，Redux是一个非常流行的状态管理库。在处理现代Web应用的数据交换方面，Redux支持异步状态更新，其中API调用是其中一个重要的方面。本文将介绍如何使用redux-api-token-middleware npm包进行API调用，以及如何将JSON Web令牌添加到所有API请求中。
什么是Redux？
Redux是一个JavaScript state容器，它的作用是管理应用程序的状态。Redux有以下几个核心概念：
- store：存储了整个应用程序的状态。这个状态对象只允许用一种方式更新：通过dispatching一个action对象来描述状态变化。
- action：是一个包含type属性的普通对象，用于描述状态变化，它传递数据到store。
- reducer：描述应用程序可以如何在action派生时更改其状态，使用store.dispatch()来调度它们。
Redux可以和React等库和框架一起使用，使得在复杂的应用程序中数据流变得更加可控和可预测。
什么是redux-api-token-middleware？
redux-api-token-middleware是一种Redux的中间件，它充当处理JSON Web令牌的组件，以便您可以更轻松地往API请求中添加令牌。请求API时，该中间件将从或存储在本地存储中的JWT中提取令牌，并将其放入“Authorization”头中，以确保API请求已获授权。
安装和使用redux-api-token-middleware
首先，我们需要安装redux-api-token-middleware npm包。使用 npm 命令：
npm install redux-api-token-middleware --save
一旦安装, 我们就可以在我们的 Redux store 里面使用它。
第一步是在store/index.js文件中初始化Redux。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ----------- ---- --------------
------ - --------------------- - ---- -----------------------------
------ ----- -------------- - -------------- -- -
----- --------------- - ------------------------
----- ----- - ------------
------------
-------------
--------------------------------
--
------ ------
--在上面的代码中，我们首先导入所需的 createStore、applyMiddleware、rootReducer，并从redux-api-token-middleware包中导入createTokenMiddleware函数。这个函数是一个工厂函数，用于创建middleware实例。
然后，我们将 tokenMiddleware 添加到 applyMiddleware 函数中，最后使用 createStore 创建 Redux store。
接下来，定义好我们的API地址，以及接口请求成功、失败、请求发送loading等不同情况下，返回不同类型的 action 对象:
-- -------------------- ---- -------
----- -------- - -------------------------
------ ----- ------------- - ----------------
------ ----- ------------- - ----------------
------ ----- ------------- - ----------------
------ ----- ----- - ------ -- -
------ -
------ --------------- -------------- ---------------
-------- -
---- -------- - --------
------- -------
----- ----
-
--
--在上面的代码中，我们定义了三个类型: LOGIN_REQUEST, LOGIN_SUCCESS 和 LOGIN_FAILURE。当 handleSubmit 方法触发 login action creator时，我们看到 types 属性存储了3个不同类型的action对象，每个对象都带有一个字符串 type 值。
options 对象包含url，请求方法以及所需的Data。我们将在发送 API 请求时对它们进行控制。
最后，我们将API请求与Middleware集成在一起，将我们的API请求配置为：
signin = (values) => {
return (dispatch) => {
dispatch(login(values));
};
};在上述代码中，我们在将login集成到redux中，并最终dispatch发起该请求。我们在调度 API 请求时不需要任何其他代码，只要它被定义为 Redux action creator。redux-api-token-middleware将确保该请求始终带有必要的Authorization头部。
总结
redux-api-token-middleware使得将JSON Web令牌添加到API请求变得非常的简单和方便。通过在store配置中添加它，可以轻松地进一步封装 API 调用，并确保所有请求都带有授权token。
在任何现代的Web应用中，Redux都是一种非常流行的状态管理库，可以交替使用其他的Web框架一起使用。在使用redux-api-token-middleware之前，我们需要具备基础的 Redux 基础知识。希望通过本文，您对Redux及redux-api-token-middleware有了更深入的理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562eb81e8991b448e09af