Comment ajouter plusieurs middleware à Redux?

J'ai un middleware déjà branché, redux-thunk, et j'aimerais en ajouter un autre, redux-logger.

Comment puis-je le configurer pour que mon application utilise les deux middleware? J'ai essayé de passer un tableau de [ReduxThunk, logger] mais cela n'a pas fonctionné.

Code: 

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')
);
37
demandé sur doctopus 2017-05-13 19:03:30

3 réponses

ApplyMiddleware prend chaque morceau de middleware comme un nouvel argument (pas un tableau). Donc, il suffit de passer dans chaque morceau de middleware que vous souhaitez.

const createStoreWithMiddleware = applyMiddleware(ReduxThunk, logger)(createStore);
55
répondu Andy Noelker 2017-05-13 16:06:08

La réponse d'andy est bonne, mais, considérez vos middlewares de plus en plus, les codes ci-dessous seront meilleurs: 

const middlewares = [ReduxThunk, logger]
applyMiddleware(...middlewares)
10
répondu chen Jacky 2018-05-06 09:07:19

applyMiddleware devrait passer dans createStore comme deuxième paramètre. applyMiddleware peut avoir plusieurs middlewares comme arguments.

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

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.querySelector('#app')
);
6
répondu Tharaka Wijebandara 2017-05-13 16:11:27