如何向Redux添加多个中间件？

Question

我已经插入了一个中间件，redux-thunk，我想添加另一个中间件，redux-logger。

我如何配置它，使我的应用程序使用这两块中间件？我试着传递一个[ReduxThunk, logger]数组，但这不起作用。

代码：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import logger from 'redux-logger';

import App from './components/app';
import reducers from './reducers';
require('./style.scss');

const createStoreWithMiddleware = applyMiddleware(ReduxThunk)(createStore);

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

Answer 1

applyMiddleware将每一块中间件作为新的参数(而不是数组)。因此，只需传递您想要的每一个中间件。

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

Answer 2

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

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

Answer 3

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

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

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