什么是 Redux 中间件？
在 Redux 中，中间件是一个可以拦截 Redux 应用中 action 的函数，它可以在 action 到达 reducer 之前或之后对 action 进行一些额外的处理。
中间件可以用于实现各种功能，例如异步操作、日志记录、错误处理、路由跳转等。
Redux 中间件的原理
Redux 中间件的原理可以用下图来表示：
当一个 action 被发起时，它会先经过所有注册的中间件，然后再到达 reducer 进行处理。每个中间件都可以对 action 进行修改、延迟或阻止它的传递。
中间件的核心是 next 函数，它代表下一个中间件或 reducer。每个中间件都可以通过调用 next(action) 将 action 传递给下一个中间件或 reducer。
Redux 中间件的使用
1. 安装中间件
使用中间件需要先安装对应的库。以异步操作为例，我们可以使用 redux-thunk 中间件。可以通过以下命令进行安装：
npm install redux-thunk --save
2. 注册中间件
在创建 Redux store 时，需要将中间件注册到 store 中。可以使用 applyMiddleware 函数来注册中间件。
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
applyMiddleware(thunkMiddleware)
);3. 创建中间件
如果需要定制自己的中间件，可以使用以下模板来创建：
const myMiddleware = store => next => action => {
// 处理 action
return next(action);
};其中，store 参数代表 Redux store，next 参数代表下一个中间件或 reducer，action 参数代表当前处理的 action。
4. 使用中间件
在 action 中使用中间件非常简单，只需要在 action 创建函数中返回一个函数即可。这个函数接收两个参数：dispatch 和 getState。dispatch 参数用于触发其他 action，getState 参数用于获取当前 state。
-- -------------------- ---- -------
----- --------- - -- -- -
------ ---------- --------- -- -
-- ------
-------------------------------------
-------------- -- ----------------
---------- -- -
-- ---------- ------
---------- ----- --------------------- ---- ---
--
------------ -- -
-- ---------- ------
---------- ----- --------------------- ----- ---
---
--
--示例代码
以下示例代码演示了如何使用 redux-thunk 中间件来实现异步操作：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ --------------- ---- --------------
----- ------------ - -
----- -----
------ -----
-------- -----
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ---------------------
------ -
---------
-------- ----
--
---- ---------------------
------ -
---------
----- ------------
-------- -----
--
---- ---------------------
------ -
---------
------ -------------
-------- -----
--
--------
------ ------
-
--
----- --------- - -- -- -
------ ---------- --------- -- -
---------- ----- -------------------- ---
-------------------------------------
-------------- -- ----------------
---------- -- -
---------- ----- --------------------- ---- ---
--
------------ -- -
---------- ----- --------------------- ----- ---
---
--
--
----- ----- - ------------
--------
--------------------------------
--
------------------ -- -
------------------------------
---
----------------------------总结
本文介绍了 Redux 中间件的原理及详细使用教程。中间件是 Redux 的重要概念，可以用于实现各种功能。在使用中间件时，需要先安装对应的库并将其注册到 Redux store 中，然后在 action 创建函数中返回一个函数来触发异步操作。希望本文能够对你学习 Redux 中间件有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6601e29bd10417a222d280f6