在 React-Redux 应用中，我们经常会使用到一种叫做中间件 MiddleWares 的概念，它为我们提供了一种在 Redux Action 和 Reducer 之间添加额外逻辑的方式。本文将介绍 MiddleWares 的详细原理、使用方式和示例代码，希望能够帮助读者更好地理解 React-Redux 应用开发。
MiddleWares 是什么？
MiddleWares 是 Redux 应用中用来处理 Action 的函数，可以将多个 MiddleWares 序列在一起，组合成一个处理链。每个 MiddleWare 接收到一个 Action，可以对其进行一些操作，再将修改后的 Action 或一个新的 Action 传递给下一个 MiddleWare。最后，修改后的 Action 通过 Reducer 处理进入 Store。
MiddleWares 的使用
MiddleWares 可以在创建 Store 的时候传入 applyMiddleware 方法，它会将所有 MiddleWares 组成一个链。例如：
import { createStore, applyMiddleware } from 'redux';
import loggerMiddleware from 'redux-logger';
const store = createStore(
rootReducer,
applyMiddleware(loggerMiddleware)
);在上面的示例代码中，loggerMiddleware 是一个异步的中间件，它用来记录当前的 state 和 action，并输出到 console 控制台下。applyMiddleware 接受一个或多个 MiddleWare，返回一个加强版的 createStore 方法。
如何编写一个 MiddleWare？
一个 MiddleWare 是一个函数，它接收 Store 实例中的 dispatch 和 getState 方法作为参数，返回一个函数，这个函数接收 next 参数，表示下一个 MiddleWare 或 Reducer。下面是一个简单的 MiddleWare 示例代码：
const myMiddleware = store => next => action => {
console.log('dispatching', action);
const result = next(action);
console.log('next state', store.getState());
return result;
}在上面的代码中，我们定义了一个 myMiddleware，当它被调用时会在控制台输出当前 Action 和 State。最后，它会将结果返回给下一个 MiddleWare 或 Reducer。
使用 Multiple MiddleWares
MiddleWares 可以被组合使用，例如：
-- -------------------- ---- ------- ----- ----------- - ----- -- ---- -- ------ -- ------------- ----- ----------- - ----- -- ---- -- ------ -- ------------- ----- ------------------ - ---------------- -- - ------ ---------------------- -- -- --------- -- -------------- - ----- ------------------ - ------------------------------- ------------- ----- ----- - ------------ ------------ ----------------------------------- --
在上面的示例代码中，我们定义了两个 MiddleWares：middleware1 和 middleware2。然后，我们使用 composeMiddlewares 方法将这两个 MiddleWares 组合起来，最终传递给 createStore 方法。
MiddleWares 的作用
在 React-Redux 应用中，MiddleWares 的作用非常大，它可以帮助我们处理一些复杂的逻辑，例如：异步操作、请求拦截、响应处理等。下面是一个在 Redux 中使用 axios 处理网络请求的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------------- - ----- -- ---- -- ------ -- -
-- ------- ------ --- ----------- -
------ ---------------------- ----------------
-
----- - ------ --------- ------- - - -------
-- -------- -
------ -------------
-
----- --------- -------- -------- - ------
------ -------- ----- ------- ---
------ ---------------
-------------- -- ------ -------- --------- ----- ------- ---
------------ -- ------ -------- ------ ----- ------- ----
-
------ ------- --------------在上面的代码中，我们定义了一个 apiMiddleware，它帮助我们处理网络请求。我们可以定义一个 Action，然后使用 apiMiddleware 作为中间件，将请求发送给服务器，然后根据请求结果返回不同的 Action。这样，我们就可以在所有的组件中使用这个 Action，来获取服务器的数据了。
结论
MiddleWares 可以帮助我们解决很多复杂的问题，例如：异步操作、请求拦截、响应处理等。在 React-Redux 应用中，MiddleWares 非常重要，它为我们提供了一种在 Action 和 Reducer 之间添加额外逻辑的方式。希望本文可以帮助读者更好地理解 React-Redux 应用开发中的 MiddleWares。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671998e3ad1e889fe2319a7a