React Redux Tutorials - 11 - Middleware

Middleware

• is the suggested way to extend Redux with custom functionality.
• provides a third-party extention point between dispatching an action, and the moment it reaches the reducer.
• is used for logging, crash reporting, performing asynchronous tasks, etc.

Redux Logger

Redux logger logs all the information related to Redux in the application. npm | redux-logger

npm install redux-logger

// (1) require redux-logger
const reduxLogger = require('redux-logger');
const applyMiddleware = redux.applyMiddleware;
const logger = reduxLogger.createLogger();

• Redux library provides a function called applyMiddleware which is used to apply middleware.

// (2) pass applyMiddleware in a second parameter to the createStore function.
const store = createStore(rootReducer, applyMiddleware(logger));

// (3) remove console.log statement, as we have the logger middleware to handle all of that.
// const unsubscribe = store.subscribe(() => console.log('Updated state', store.getState());
const unsubscribe = store.subscribe(() => {})

Node index

%c action %cBUY_CAKE %c@ 16:16:51.616 color: gray; font-weight: lighter; color: inherit; color: gray; font-weight: lighter;
  %c prev state color: #9E9E9E; font-weight: bold { cake: { numOfCakes: 10 }, iceCream: { numOfIceCreams: 20 } }
  %c action     color: #03A9F4; font-weight: bold { type: 'BUY_CAKE', info: 'first redux action' }
  %c next state color: #4CAF50; font-weight: bold { cake: { numOfCakes: 9 }, iceCream: { numOfIceCreams: 20 } }
%c action %cBUY_CAKE %c@ 16:16:51.633 color: gray; font-weight: lighter; color: inherit; color: gray; font-weight: lighter;
  %c prev state color: #9E9E9E; font-weight: bold { cake: { numOfCakes: 9 }, iceCream: { numOfIceCreams: 20 } }
  %c action     color: #03A9F4; font-weight: bold { type: 'BUY_CAKE', info: 'first redux action' } (...)

브라우저 콘솔에서 보는 것이 더 가독성이 높다.

📃 Code

const redux = require('redux');
const createStore = redux.createStore;
const combineReducers = redux.combineReducers;

// (1) require redux-logger
const reduxLogger = require('redux-logger');
const applyMiddleware = redux.applyMiddleware;
const logger = reduxLogger.createLogger();

const BUY_CAKE = 'BUY_CAKE' 
const BUY_ICECREAM = 'BUY_ICECREAM'

function buyCake() {
  return {
    type: BUY_CAKE,
    info: 'first redux action'
  }
}

function buyIceCream() {
  return {
    type: BUY_ICECREAM,
  }
}

const initialCakeState = {
  numOfCakes: 10
}

const initialIceCreamState = {
  numOfIceCreams: 20
}

const cakeReducer = (state = initialCakeState, action) => {
  switch(action.type) {
    case BUY_CAKE: return {
      ...state,
      numOfCakes: state.numOfCakes - 1
    }
    default: return state  
  }
}

const iceCreamReducer = (state = initialIceCreamState, action) => {
  switch(action.type) {
    case BUY_ICECREAM: return {
      ...state,
      numOfIceCreams: state.numOfIceCreams - 1
    }
    default: return state  
  }
}

const rootReducer = combineReducers({
  cake: cakeReducer,
  iceCream: iceCreamReducer
})

// (2) pass applyMiddleware in a second parameter to the createStore function.
const store = createStore(rootReducer, applyMiddleware(logger));

console.log('Initial State', store.getState());

// (3) remove console.log statement, as we have the logger middleware to handle all of that.
// const unsubscribe = store.subscribe(() => console.log('Updated state', store.getState());
const unsubscribe = store.subscribe(() => {})

store.dispatch(buyCake());
store.dispatch(buyCake());
store.dispatch(buyCake());
store.dispatch(buyIceCream());
store.dispatch(buyIceCream());

unsubscribe();