Middleware

Middleware

middlewares intercept actions, modify them, or cancel them by not calling any of the next middleware.

Basically, middleware happens between dispatching an action, and the moment it reaches the reducer.

// Create a middleware
// Logger
const logger = store => next => action => {
  console.log('action fired', action)
  next(action)
}

// Apply middleware
const middleware = applyMiddleware(logger)

// create the store, pass it the middleware along with reducers and state
const store = createStore(reducer, 1, middleware)

You’re probably never gonna create middleware, you’ll just npm install them. For example, redux-logger gives you very nice console logs about state changes. redux-thunk is another one that let’s you send multiple dispatch() functions asynchronously

Async Functions with redux-thunk

import thunk from `redux-thunk`

const middleware = applyMiddleware(thunk)
const store = createStore(reducer, 1, middleware)

store.subscribe(() => {
  console.log('store changed', store.getState())
})

store.dispatch((dispatch) => {
  dispatch({type: 'INC'})
  dispatch({type: 'FOO'})
  dispatch({type: 'BAR'})
  dispatch({type: 'DEC'})
  dispatch({type: 'BAZ'})
  dispatch({type: 'DEC'})
  dispatch({type: 'E'})
})

All the dispatch function above will be called async. Multiple actions are happening with one single action.

// Send actions
store.dispatch({type: 'INC'})
store.dispatch({type: 'FOO'})
store.dispatch({type: 'BAR'})
store.dispatch({type: 'DEC'})
store.dispatch({type: 'BAZ'})
store.dispatch({type: 'DEC'})
store.dispatch({type: 'E'})

will become

store.dispatch((dispatch) => {
  dispatch({type: 'INC'})
  dispatch({type: 'FOO'})
  dispatch({type: 'BAR'})
  dispatch({type: 'DEC'})
  dispatch({type: 'BAZ'})
  dispatch({type: 'DEC'})
  dispatch({type: 'E'})
})