How to add multiple middleware to redux

In Redux, you can use the applyMiddleware function to add multiple middleware. applyMiddleware is an internal function of Redux that allows you to attach middleware to the Redux dispatch method. When creating a Redux store, you can enhance its functionality in this way.

Here is a basic example of using applyMiddleware to add multiple middleware, assuming we have two middleware middleware1 and middleware2:

javascript
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import rootReducer from './reducers';

// Create middleware instances
const middleware1 = thunk;
const middleware2 = logger;

// Use `applyMiddleware` function to combine multiple middleware
const store = createStore(
  rootReducer,
  applyMiddleware(middleware1, middleware2)
);

export default store;

In this example, the thunk middleware is used to support asynchronous action creators, while the logger middleware is used to print log information to the console each time an action is dispatched. These two middleware are added to the store in the order specified by applyMiddleware. Redux processes these middleware in the sequence provided to applyMiddleware, so in the above code, the thunk middleware handles actions before the logger middleware.

It is important to note that the execution order of middleware matters because some middleware may depend on the results processed by earlier middleware. Therefore, when adding multiple middleware, you should consider their dependencies and execution order.

You can easily pass multiple middleware functions separated by commas, as illustrated in the following code:

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

Note: Import applyMiddleware, thunk, and logger at the top of your file.

Here's how to apply one or more middleware:

javascript
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]; // Store the list of third-party middleware 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 in index.js and pass it to the Provider component. Your index.js file should look like this:

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

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

Done!

applyMiddleware should be passed as the second argument to createStore. applyMiddleware can accept multiple middleware arguments.

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

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

applyMiddleware treats each middleware as a separate argument (not an array). Therefore, simply pass in each middleware you want.

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