How to add multiple middleware to redux

在 Redux 中，您可以使用 applyMiddleware 函数来添加多个中间件。applyMiddleware 是 Redux 的一个内置函数，它允许您将中间件链接到 Redux 的 dispatch 方法上。当您创建 Redux store 的时候，可以通过这种方式来增强 store 的功能。

下面是如何使用 applyMiddleware 来添加多个中间件的一个基本例子，假设我们有两个中间件 middleware1 和 middleware2：

javascript
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import rootReducer from './reducers';

// 创建中间件实例
const middleware1 = thunk;
const middleware2 = logger;

// 使用`applyMiddleware`函数结合多个中间件
const store = createStore(
  rootReducer,
  applyMiddleware(middleware1, middleware2)
);

export default store;

在这个例子中，中间件 thunk 用于支持异步 action creator，而 logger 用于在每次 action 被派发时在控制台中打印日志信息。这两个中间件通过 applyMiddleware 函数按照顺序被添加到 store 中。Redux 会按照提供给 applyMiddleware 的顺序来调用这些中间件，因此在上面的代码中，thunk 中间件会先于 logger 中间件处理 actions。

值得注意的是，中间件的执行顺序很重要，因为某些中间件可能依赖于前面中间件的处理结果。因此，在添加多个中间件时，应当考虑它们之间的依赖关系及执行顺序。

applyMiddleware将每个中间件作为新参数（而不是数组）。因此，只需传入您想要的每个中间件即可。

shell
const createStoreWithMiddleware = applyMiddleware(ReduxThunk, logger)(createStore);

安迪的回答很好，但是，考虑到你的中间件不断增长，下面的代码会更好：

shell
const middlewares = [ReduxThunk, logger]
applyMiddleware(...middlewares)

applyMiddleware应作为第二个参数传递给 createStore。applyMiddleware可以有多个中间件作为参数。

shell
const store = createStore(reducers, applyMiddleware(ReduxThunk, logger));

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.querySelector('#app')
);

这是应用一个或多个中间件的方法：

shell
import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import {rootReducer} from "../reducers"; // Import your combined reducers ;)

const middleWares = [thunk, logger]; // Put the list of third part plugins in an array 

// Create the store with the applied middleWares and export it
export const store = createStore(rootReducer, applyMiddleware(...middleWares));

现在导入最近在 index.js 中导出的存储并将其传递给 Provider 组件。您的 index.js 文件应如下所示：

……

shell
import {Provider} from 'react-redux';
import {store} from './store';

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>, 
document.getElementById('root'));

就这样 ！

您可以简单地以逗号分隔的方式传递中间件，如下代码所示：

const store = createStore(reducer, applyMiddleware(thunk, logger));

注意：请导入顶部的 applyMiddlware、thunk 和 logger。