How to add multiple middleware to Redux?

Question

I have one piece of middleware already plugged in, redux-thunk, and I'd like to add another, redux-logger.

How do I configure it so my app uses both pieces of middleware? I tried passing in an array of [ReduxThunk, logger] but that didn't work.

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')
);

Andy Noelker · Accepted Answer · 2017-05-13 16:06:08Z

126

applyMiddleware takes each piece of middleware as a new argument (not an array). So just pass in each piece of middleware you'd like.

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

answered May 13, 2017 at 16:06

Andy Noelker

11.3k7 gold badges39 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

doctopus Over a year ago

That was simple enough. Thank you!

the_haystacker Over a year ago

and how do you pass the reducer to the createStore method?

chen Jacky · Accepted Answer · 2018-05-06 09:07:19Z

32

answer of andy's is good, but, consider your middlewares growing, below codes will be better:

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

answered May 6, 2018 at 9:07

chen Jacky

5774 silver badges9 bronze badges

2 Comments

Sergey Over a year ago

Thank you, but i add redux-thunk const store = createStore(reducer, composeWithDevTools(applyMiddleware(thunk, ...middleware)));

james murphy Over a year ago

Initial post stated that array was not working with redux_thunk...same issue for me

Tharaka Wijebandara · Accepted Answer · 2017-05-13 16:11:27Z

12

applyMiddleware should pass into createStore as the second parameter. applyMiddleware can have multiple middlewares as arguments.

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

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

answered May 13, 2017 at 16:11

Tharaka Wijebandara

8,0751 gold badge33 silver badges50 bronze badges

3 Comments

Daniel Reina Over a year ago

If I do this I get "createStore is not a function". Any idea where this error could be coming from? I'm trying to use redux-saga and remote-redux-devtools

Tharaka Wijebandara Over a year ago

Probably you are not importing createStore correctly or using an old version of redux.

Daniel Reina Over a year ago

the problem was that one of the middleware didn't need applyMiddleware, so I had to use compose(applyMiddleware(saga), devtools()). Thanks!

Mustapha GHLISSI · Accepted Answer · 2019-04-07 16:50:16Z

2

This is how to apply one or many middlewares :

import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import {rootReducer} from "../reducers"; // Import your combined reducers ;)

const middleWares = [thunk, logger]; // Put the list of third part plugins in an array 

// Create the store with the applied middleWares and export it
export const store = createStore(rootReducer, applyMiddleware(...middleWares));

Now import the store exported recently in your index.js and pass it to the Provider component. Your index.js file should looks like :

... ...

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

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>, 
document.getElementById('root'));

That's all !

answered Apr 7, 2019 at 16:50

Mustapha GHLISSI

1,8161 gold badge20 silver badges21 bronze badges

1 Comment

Wilson Over a year ago

very complete answer!

Harvester Haidar · Accepted Answer · 2020-10-16 15:45:21Z

1

it may be a bit late of an answer but my problem was adding the devtools with the middlewares, hope this helps somebody

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

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

answered Oct 16, 2020 at 15:45

Harvester Haidar

5538 silver badges17 bronze badges

Comments

Mohd Nowman · Accepted Answer · 2022-01-06 12:27:53Z

1

You can simply pass the middlewares in the comma separated manner like the following code:

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

Note: Please import the applyMiddlware, thunk, and logger at the top.

answered Jan 6, 2022 at 12:27

Mohd Nowman

772 silver badges9 bronze badges

Comments

Md Rafiqul Islam · Accepted Answer · 2023-01-15 07:27:47Z

0

export default configureStore({
  reducer: {
    products: productReducer,
    cart: cartReducer,
    [productsApi.reducerPath]: productsApi.reducer,
    userAuth: authSlice,
  },

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

});

edited Jan 15, 2023 at 7:27

answered Jan 15, 2023 at 7:24

Md Rafiqul Islam

11 bronze badge

Collectives™ on Stack Overflow

How to add multiple middleware to Redux?

7 Answers 7

2 Comments

2 Comments

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

2 Comments

3 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related