在 Redux 中，中间件（Middleware）是一个非常重要的概念。它可以让我们在派发 Action 和执行 Reducer 之间加入自己的逻辑。这种机制非常强大，可以让我们在处理数据流的过程中加入非常复杂的逻辑。
什么是中间件
中间件是一种函数，它接收 Store 的 dispatch 函数作为参数，并返回一个新的 dispatch 函数。通过这种方式，中间件可以在处理 Action 和执行 Reducer 的过程中，加入自己的逻辑。在 Redux 中，一个最简单的中间件可以如下所示：
const simpleMiddleware = store => dispatch => action => {
console.log('action dispatched:', action);
const result = dispatch(action);
console.log('state updated:', store.getState());
return result;
};这个中间件会在每次派发 Action 之前，输出 Action 的内容，并在每次执行 Reducer 之后，输出 Store 的当前状态。我们可以通过如下代码，将这个中间件应用到 Store 中：
import { createStore, applyMiddleware } from 'redux';
const store = createStore(reducer, applyMiddleware(simpleMiddleware));在这段代码中，我们使用了 applyMiddleware 函数将中间件应用到了 Store 中。
中间件的作用
中间件可以帮助我们实现一些非常复杂的逻辑。比如，我们可以使用中间件来实现异步 Action，如下所示：
const asyncMiddleware = store => dispatch => action => {
if (typeof action === 'function') {
return action(dispatch, store.getState);
}
return dispatch(action);
};这个中间件可以接收一个函数类型的 Action。如果 Action 是一个函数，那么中间件会在函数执行完成之后，再将函数的返回值作为 Action 进行派发。这样，我们就可以在 Action 中执行异步操作了，而不需要在组件中进行操作。
中间件的顺序
当我们同时使用多个中间件时，中间件的顺序非常重要。比如，我们可以使用 Redux Logger 中间件，来输出每次执行 Action 的内容和 Store 的状态变化情况：
-- -------------------- ---- ------- ------ - ------------ - ---- --------------- ----- ---------------- - --------------- ----- ----- - -------------------- ---------------- ---------------- ----------------- ---------------- ---
在上面的代码中，我们将我们上面实现的两个中间件和 Redux Logger 中间件一起使用了。这时，中间件的顺序就显得非常重要了。通常，我们会将引入 Action 时使用的中间件放在前面，而将产生副作用的中间件放在后面。所以，正确的中间件的顺序应该是：
const store = createStore(reducer, applyMiddleware( loggerMiddleware, asyncMiddleware, simpleMiddleware ));
总结
中间件是 Redux 中一个非常重要的概念，它可以帮助我们实现非常复杂的逻辑，如异步操作、日志输出等。在多个中间件同时使用时，中间件的顺序非常重要。在实际开发中，我们需要根据业务需求，选择使用不同的中间件，以实现自己的逻辑。
示例代码
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ------------ - ---- ---------------
----- ------- - ------- ------- -- -
------ ------------- -
---- ------
------ - --------- ------ ----------- - -------------- --
--------
------ ------
-
--
----- ---------------- - ----- -- -------- -- ------ -- -
------------------- ------------- --------
----- ------ - -----------------
------------------ ---------- ------------------
------ -------
--
----- --------------- - ----- -- -------- -- ------ -- -
-- ------- ------ --- ----------- -
------ ---------------- ----------------
-
------ -----------------
--
----- ---------------- - ---------------
----- ----- - -------------------- ----------------
-----------------
----------------
----------------
---
----- --- - ----- -- ---------- -- -
------------- -- -
---------- ----- ------ -------- --- --
-- ------
--
-----------------------
-----------------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c74fd110032fedd391108a