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

Vous pouvez simplement passer les middlewares de manière séparée par des virgules comme dans le code suivant :

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

Note : Veuillez importer applyMiddlware, thunk et logger en haut.

Answer 2

export par défaut configureStore({
  reducer: {
    products: productReducer,
    cart: cartReducer,
    [productsApi.reducerPath]: productsApi.reducer,
    userAuth: authSlice,
  },

  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false
    }).concat(productsApi.middleware),

});