Redux js

Redux.js

function compose(...funcs) {
  funcs = funcs.filter(func => typeof func === 'function')

  if (funcs.length === 0) {
    return arg => arg
  }

  if (funcs.length === 1) {
    return funcs[0]
  }

  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState, enhancer) => {
    var store = createStore(reducer, preloadedState, enhancer)
    var dispatch = store.dispatch
    var chain = []

    var middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action)
    }
    chain = middlewares.map(middleware => middleware(middlewareAPI))
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

var ActionTypes = {
  INIT: '@@redux/INIT'
}

function createStore(reducer, preloadedState, enhancer) {
  if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
    enhancer = preloadedState
    preloadedState = undefined
  }

  if (typeof enhancer !== 'undefined') {
    if (typeof enhancer !== 'function') {
      throw new Error('Expected the enhancer to be a function.')
    }

    return enhancer(createStore)(reducer, preloadedState)
  }

  if (typeof reducer !== 'function') {
    throw new Error('Expected the reducer to be a function.')
  }

  var currentReducer = reducer
  var currentState = preloadedState
  var currentListeners = []
  var nextListeners = currentListeners
  var isDispatching = false

  function getState() {
    return currentState
  }

  function dispatch(action) {
    try {
      isDispatching = true
      currentState = currentReducer(currentState, action)
    } finally {
      isDispatching = false
    }

    return action
  }

  // When a store is created, an "INIT" action is dispatched so that every
  // reducer returns their initial state. This effectively populates
  // the initial state tree.
  dispatch({ type: ActionTypes.INIT })

  return {
    dispatch,
    getState
  }
}

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

var timer =  ({ dispatch, getState }) => next => action => {
  var start = new Date().getMilliseconds();
  next(action);
  var time = new Date().getMilliseconds() - start;
  console.log(time);
}

var logger =  ({ dispatch, getState }) => next => action => {
  console.log("[BEFORE]: ", getState());
  next(action);
  console.log("[AFTER]: ", getState());
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

var reducer = (state = 1, action) => {
  if(action.type === "SQUARE_CALCULATOR") {
      return action.payload * action.payload;
  } else {
    return state;
  }
}

let store = createStore(
  reducer,
  applyMiddleware(thunk, timer, logger)
)

store.dispatch({type: "SQUARE_CALCULATOR", payload: 10})
store.dispatch({type: "SQUARE_CALCULATOR", payload: 2})
store.dispatch((dispatch) => {
  setTimeout(function(){
    dispatch({type: "SQUARE_CALCULATOR", payload: 4})
  }, 1000);
});