Comment ajouter plusieurs middleware à Redux?

Question

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

Comment puis-je le configurer pour que mon application utilise les deux middlewares ? J'ai essayé de passer un tableau [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, logger)(createStore);

ReactDOM.render(

  ,
  document.querySelector('#app')
);

Answer 1

applyMiddleware prend chaque morceau de middleware comme un nouvel argument (pas un tableau). Donc passez simplement chaque morceau de middleware que vous souhaitez.

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

Answer 2

La réponse d'Andy est bonne, mais, considérez la croissance de vos middlewares, les codes ci-dessous seront meilleurs:

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

Answer 3

applyMiddleware devrait être passé dans createStore en tant que deuxième paramètre. applyMiddleware peut avoir plusieurs middlewares en tant qu'arguments.

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

ReactDOM.render(

  ,
  document.querySelector('#app')
);

Answer 4

Voici comment appliquer un ou plusieurs middlewares :

import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import {rootReducer} from "../reducers"; // Importez vos reducers combinés ;)

const middleWares = [thunk, logger]; // Mettez la liste des plugins tiers dans un tableau

// Créez le store avec les middlewares appliqués et exportez-le
export const store = createStore(rootReducer, applyMiddleware(...middleWares));

Maintenant importez le store récemment exporté dans votre index.js et passez-le au composant Provider. Votre fichier index.js devrait ressembler à ceci :

... ...

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

ReactDOM.render(

    , 
document.getElementById('root'));

C'est tout !

Answer 5

Il se peut que ma réponse soit un peu tardive mais mon problème était d'ajouter les outils de développement avec les middlewares, j'espère que cela aidera quelqu'un

// imports.. 
import { composeWithDevTools } from "redux-devtools-extension";

const store = createStore(
   Reducer,
   persistedState,
composeWithDevTools(applyMiddleware(ReduxThunk, promiseMiddleware))
);