Notes

Middleware

Edit on GitHub


Redux
2 minutes

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.

 1// Create a middleware
 2// Logger
 3const logger = store => next => action => {
 4  console.log('action fired', action)
 5  next(action)
 6}
 7
 8// Apply middleware
 9const middleware = applyMiddleware(logger)
10
11// create the store, pass it the middleware along with reducers and state
12const 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

 1import thunk from `redux-thunk`
 2
 3const middleware = applyMiddleware(thunk)
 4const store = createStore(reducer, 1, middleware)
 5
 6store.subscribe(() => {
 7  console.log('store changed', store.getState())
 8})
 9
10store.dispatch((dispatch) => {
11  dispatch({type: 'INC'})
12  dispatch({type: 'FOO'})
13  dispatch({type: 'BAR'})
14  dispatch({type: 'DEC'})
15  dispatch({type: 'BAZ'})
16  dispatch({type: 'DEC'})
17  dispatch({type: 'E'})
18})

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

1// Send actions
2store.dispatch({type: 'INC'})
3store.dispatch({type: 'FOO'})
4store.dispatch({type: 'BAR'})
5store.dispatch({type: 'DEC'})
6store.dispatch({type: 'BAZ'})
7store.dispatch({type: 'DEC'})
8store.dispatch({type: 'E'})

will become

1store.dispatch((dispatch) => {
2  dispatch({type: 'INC'})
3  dispatch({type: 'FOO'})
4  dispatch({type: 'BAR'})
5  dispatch({type: 'DEC'})
6  dispatch({type: 'BAZ'})
7  dispatch({type: 'DEC'})
8  dispatch({type: 'E'})
9})