什么是 Redux 中间件
Redux 中间件是一种增强 Redux store 功能的方法，它可以在 action 被发起之后，到达 reducer 之前对该 action 进行定制化的处理。
使用中间件可以方便地添加额外的逻辑，在 Redux 的数据流中做一些需要追加的处理，例如异步请求、日志记录等操作。
中间件的使用场景
Redux 中间件具有拦截、修改、延迟等功能，可以在 action 被 reducer 处理前后，做一些额外的操作。下面列举了一些常见的使用场景：
Action 异步请求
在 Redux 中，Action 用于描述发生了什么，而中间件可以解决异步请求的问题。我们可以在中间件中捕获异步请求，并改变 Action 的 Action Type 或 Payload，然后再发送给 Reducer。这个过程中就需要用到 redux-thunk 中间件。
// Example
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';
const store = createStore(rootReducer, applyMiddleware(thunk));日志记录
在进行开发和调试过程中，我们需要对 Redux 的状态变化有所了解。可以通过记录日志的方式，使开发人员在出现问题的情况下迅速进行排除。通过 Redux-logs 中间件，可以在控制台或指定文件中输出日志。
// Example
import { createStore, applyMiddleware } from 'redux';
import logger from 'redux-logger';
import rootReducer from './reducers/index';
const store = createStore(rootReducer, applyMiddleware(logger));Redux 中间件的实现
Redux 中间件是一个函数，接受三个参数：store，next 和 action。它需要在 action 被处理后返回一个处理结果。如果不返回结果，则被视为无返回值的空函数，执行结果和 next 相同。
const middleware = store => next => action => {
// 执行中间件操作
return next(action);
};- store：Redux Store 对象，可以通过它获取和更新 Redux 状态；
- next：一个函数，传入的 action 被传递到下一个中间件或 reducer；
- action：当前被处理的 action 对象。
示例代码
-- -------------------- ---- -------
-- ---------- -
----- ---------------- - ----- -- ---- -- ------ -- -
------------------- - - ----------- - ---- ------------------
------------------- - - ----------- - ---- --------
----- ------ - -------------
------------------ - - ----------- - ---- ------------------
------ -------
--
-- ---------- -
----- --------------- - ----- -- ---- -- ------ -- -
-- ------- ------ --- ----------- -
------ ---------------------- ----------------
-
------ -------------
--
-- ---------- -
----- ----------- - ----- -- ---- -- ------ -- -
------------------------ ------ ---------- ------------------
----- ------ - -------------
------------------------ ----- ---------- ------------------
------ -------
--
-- ----- ----------
----- ----- - ------------
------------
--------------------------------- ---------------- ------------
--结论
Redux 中间件可以提供多种场景的定制化操作，利用中间件技术，可以在 Redux 的 action 触发 reducer 的过程中实现更多的逻辑功能，方便于业务需求的扩展和定制。同时，Redux 中间件也是 Redux 灵活性的一种体现。通过了解中间件的原理和使用场景，对于前端开发人员来说，能够更清晰地理解一个 Redux 应用的基本流程，同时也能够在实践中运用好这个强大的技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672abee3ddd3a70eb6d0aa2e