naive-redux-middleware.js

import { createStore, combineReducers } from 'redux'

// for webpackbin
const log = typeof bin.log === 'function' ? bin.log : console.log;

function reducer (state = 0, action) {
  if (action.type === 'INCREMENT') {
    return state + 1
  }
  return state
}

// very naive applyMiddleware, only supports 1 middleware
// from Kevin Heis presentation
function applyMiddleware(middleware) {
  return function(createStore) {
    return function(reducer) {
      var store = createStore(reducer);
      return {
        getState: store.getState,
        subscribe: store.subscribe,
        dispatch: function dispatch(action) {
          return middleware(store)(store.dispatch)(action);
        }
      };
    };
  };
}

const logger = store => next => action => {
  log('dispatching', action)
  let result = next(action)
  log('next state', store.getState())
  return result
}

// from redux doc site
const vanillaPromise = store => next => action => {
  if (typeof action.then !== 'function') {
    return next(action)
  }

  return Promise.resolve(action).then(store.dispatch)
}

let mainReducer = combineReducers({reducer})
let store = createStore(
  mainReducer,
  applyMiddleware(vanillaPromise)
)

const asyncIncrementAction = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {      
      if (Math.floor(Math.random() * 1000) % 2 === 0) {
        resolve({type:'INCREMENT'})
      } else {
        const error = new Error()
        error.mesage = 'mah error'
        reject(error)
      }
    }, 1000)
  })
}

store.subscribe(() => log(store.getState()))
store.dispatch({type: 'INCREMENT'})
store.dispatch({type: 'INCREMENT'})
store.dispatch({type: 'INCREMENT'})
store.dispatch(asyncIncrementAction().catch(bin.log))