1. 介绍
redux-middleware 是一个处理 redux 异步 action 的中间件，在 redux 中经常使用，它让我们可以处理异步操作，并且使代码更简单和易于维护。这篇文章将会介绍如何安装和使用 redux-middleware 这个 npm 包。
2. 安装
使用 npm 可以非常方便地进行安装。在终端中运行以下命令即可：
$ npm install --save redux-middleware
3. 使用
使用 redux-middleware 需要一些配置。下面是一个使用 redux-thunk 和 applyMiddleware的例子：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ --------------- ---- --------------
------ - ------------ - ---- ---------------
------ ----------- ---- -------------------
----- ---------------- - ---------------
----- ----- - ------------
------------
----------------
----------------
----------------
-
--在上面的示例中，我们将 redux-thunk 和 redux-logger 应用在 rootReducer 中。这样，我们就可以在 actionCreators 中写异步 action（例如API调用）。
下面是一个例子，展示了如何在 actionCreators 中使用异步操作：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ----------- -
------ -------- -- -
-----------------------------
----- --- - -----------------------------------------------
--------------
-------------- -- -
------------------------------------------
--
------------ -- -
--------------------------------
---
--
-
------ -------- ------------------ -
------ -
----- --------------------
--
-
------ -------- ---------------------- -
------ -
----- ---------------------
-------- ----
--
-
------ -------- --------------------- -
------ -
----- -------------------
-------- -----
--
-在我们的 actionCreator 中，我们首先分派了 fetchUserRequest 动作，然后执行 axios 调用并分派 fetchUserSuccess 或 fetchUserError 中的一个。
在上面的例子中，我们使用了 redux-thunk，但是 redux-middleware 的目的就是让我们可以编写自己的中间件，甚至是整个 redux-middleware 序列，从而可以轻松地自定义处理过程。
下面是一个自编中间件的示例，它将拦截所有 action 并将其打印到控制台上：
const loggerMiddleware = store => next => action => {
console.log('dispatching', action);
let result = next(action);
console.log('next state', store.getState());
return result;
};上面的代码定义了一个函数，该函数返回一个函数。这是一个典型的 函数柯里化，其中的箭头表示 ES6 中的新 lambda 操作符。
4. 指导意义
在对 redux 的深入了解和实际使用中，我们已经清楚 redux-middleware 是如何简化异步操作和帮助我们编写重复代码的。通过使用自定义中间件，我们甚至可以控制我们的整个应用的行为。
通过本文的介绍和示例，您应该可以开始使用 redux-middleware 并相信它的强大功能。同时，为了更好地参考，我们还提供了一些示例代码，以防您需要更多的帮助。
如果您是一个使用 redux 的前端开发人员，那么 redux-middleware 是一个不错的选择，可以使您的项目更加简单和模块化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/68866