如何向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')
);