• Why might we need middleware?
• What is redux middleware?
• Compose

• Middleware
• Compose

Redux middleware are functions that sit between a dispatched action and the reducers. They allow us to customize behavior based on the action. They also allow us to customize behavior after the reducers finish.

For example:

• we can log every action that redux handles
• we can wait for asynchronous actions
• we can store state in local storage

Redux middleware takes the form

const myMiddleware = store => next => action => {
  // ...do stuff here
}

Middleware can be applied when you create your store:

import {
  createStore,
  applyMiddleware
} from 'redux';
import reducer from './reducers';
import { myMiddleware } from './middleware/myMiddleware.js';

export default createStore(
  reducer,
  applyMiddleware(
    myMiddleware
  )
);

When we applied middleware before we applied a store enhancer. Middleware isn't a fundamental part of redux, but is added as an enhancement. We've used another redux enhancement when we used redux devtools.

To add multiple enhancements we need to compose the enhancements together.

import {
  createStore,
  applyMiddleware,
  compose
} from 'redux';
import reducer from './reducers';
import { myMiddleware } from './middleware/myMiddleware.js';

export default createStore(
  reducer,
  compose(
    applyMiddleware(
      myMiddleware
    ),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);