redux middleware example

stopwatch.js

const redux = require('redux');

const reducer = (state={}, action) => {
  switch(action.type) {
    case 'START':
      return Object.assign({}, state, {start: Date.now(), interval: action.interval});
    case 'TICK':
      return Object.assign({}, state, {elapsed: action.currentTime - state.start});
    case 'STOP':
      return Object.assign({}, state, {interval: null});
  }
  return state;
};

const timerMiddleware = store => next => action => {
  if (action.type === 'START') {
    action.interval = setInterval(() => store.dispatch({
      type: 'TICK',
      currentTime: Date.now()
    }), 1000);
  }
  if (action.type === 'STOP') {
    clearInterval(store.getState().interval);
  }
  next(action);
}

const middleWare = redux.applyMiddleware(timerMiddleware);
const store = redux.createStore(reducer, middleWare);

store.subscribe(() => console.log(store.getState().elapsed));

store.dispatch({type: 'START'});

setTimeout(() => store.dispatch({type: 'STOP'}), 5000);