Redux mini createStore example

createStore-no-comments.js

function createStore(reducer) {
    var state;
    var listeners = []

    function getState() {
        return state
    }

    function subscribe(listener) {
        listeners.push(listener)
        
        return unsubscribe() {
            var index = listeners.indexOf(listener)
            listeners.splice(listener)
        }
    }
    function dispatch(action) {
        state = reducer(state, action)
        listeners.forEach(listener => listener())
    }
    
    dispatch({})

    return { dispatch, subscribe, getState }
}

createStore.js

// Courtesy of http://paulserraino.com/javascript/2016/02/16/hacking-redux.html

function createStore(reducer) {
    var state;
    var listeners = []

    function getState() {
        return state
    }

    // The redux store interface is similar to the flux dispatcher
    // in that the flow of data is unidirectional, but unlike the
    // flux dispatcher, the Redux store is not an event-emitter it's
    // an observable object.

    // So unlike in the flux dispatcher, where we use a key/value map to
    // to manage dispatcher tokens and registered callbacks, the Redux
    // `subscribe` method simply uses an array, `listeners`, to store
    // callbacks. No tokens, no maps.

    function subscribe(listener) {
        listeners.push(listener)

        // The `unsubscribe` method will remove the listener from the
        // `listeners` array.

        return unsubscribe() {
            var index = listeners.indexOf(listener)
            listeners.splice(listener)
        }
    }

    // The `dispatch` method is used invoke actions on store and depending
    // on the type of the action the store's state will change.

    function dispatch(action) {

        // Here the reducer function is call to get the new state of the
        // store. Remember the reducer is pure function, meaning it does
        // not augment its parent scope. The reducer function returns a
        // new state object and that object is assigned to the current
        // state of the store.

        state = reducer(state, action)

        // Each time the `dispatch` method is called every listener is the
        // `listeners` array is invoked.

        listeners.forEach(listener => listener())
    }

    // Here we call the dispatch method with an empty object to initialize
    // the state of the store.

    dispatch({})

    // lastly we expose the API
    return { dispatch, subscribe, getState }
}