Redux 作为前端状态管理的利器，被广泛应用于众多项目中，而其中的中间件则起到了至关重要的作用。说白了，中间件就是对 Redux 的增强和扩展，在派发 action 前和派发 action 后扩展 Redux 的功能。Redux 封装起来而变得简单易用的重要一环，所以本文将介绍如何优雅地封装 Redux 中间件，以帮助大家更好地在实际项目中运用。
什么是中间件？
首先，我们来看看中间件的概念。在 Redux 中，中间件是一种扩展 Redux 功能的方式，它是一个函数，接收 store 的 dispatch 方法和 getState 方法作为参数，并返回一个函数，该函数接收下一个中间件作为参数，返回一个新的 dispatch 工具。中间件可以在 action 被发起后，到达 reducer 之前进行一些有用的工作。
中间件的作用包括但不限于：
- 记录日志；
- 压缩 action；
- 异步请求操作；
- 错误处理等。
Redux 中间件的封装
下面我们以一个简单的示例说明如何封装 Redux 中间件。
我们将要实现一个能够处理多重异步请求的 Redux 中间件，即每次异步请求时，如果当前页面已经有同样的请求在进行中，则不会再次发起请求，而是等待已有请求完成后再去修改 store 中的状态。
假设我们已经安装好 Redux，并创建了 todo 应用程序，现在需要引入上面的中间件。
首先我们创建一个 middleware 文件，在该文件中编写中间件逻辑。
-- -------------------- ---- ------- -- ------------- ----- ---------- - ------- -- ------ -- -------- -- - -- ---------- -- ------- ------ --- ----------- - -- --------- ----- - ----- - - ----------------- ----- ------- - ----------------- -- -------------- -- --------- - ------- - ---------------------- ---------------- - ---- - ------ ------------- - -- ------ ------- -----------展开代码
在我们的中间件中，我们对异步请求 action 进行了处理，对传入的 action 进行了区分，如果是异步请求，就判断当前页面是否已经有同样的异步请求在处理中，如果是，则不进行异步请求，否则继续进行请求，并修改 store 中的状态。如果不是异步请求，则调用 next() 传递到下一个中间件或 reducer。
接下来需要按照下面的步骤应用中间件。
- 引入 createStore 和 applyMiddleware；
- 引入我们编写的中间件；
- 使用 applyMiddleware 将我们的中间件应用到 createStore。
// index.js import { createStore, applyMiddleware } from 'redux'; import middleware from './middleware'; import reducer from './reducer'; const store = createStore(reducer, applyMiddleware(middleware));
我们的中间件已经成功应用到 redux 中了。
总结
本篇文章主要介绍了如何优雅地封装 Redux 中间件，在实际项目中有很大的指导意义。通过本篇文章的介绍，我们可以发现封装 Redux 中间件的思想并不难，但是它的应用却非常灵活，是我们开发过程中不可或缺的一部分。
本文中给出的示例代码只是为了让大家更好地理解，实际应用中需要根据具体的业务逻辑进行适当调整才能更好地配合 Redux 进行构建。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648d87f948841e9894bd853a
