Notes on how createStore works internally

createStore.js

const counter = (state=0, action) => {
  switch(action.type) {
    case 'INCREMENT': 
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default: 
      return state;
  }
}

// const { createStore } = Redux; // import { createStore } from 'redux'

// --------------------------------------------------------------------- //
// --------------------------------------------------------------------- //

// You first must call the createStore function provided in redux. You can call it by doing import { createStore } from 'redux'.
// After importing the createStore function, you create a store by passing a reducer to createStore(reducer). This function creates the store of the application essentially where the state lives


// Explaining the internals of the createStore function
const createStore = (reducer) => {
  let state; // state of the application
  let listeners = []; // array of subscribers
  
  getState = () => state; // returns the current state of the application
  
  dispatch = (action) => { // dispatches the action 
    state = reducer(state, action); // dispatch calls the reducer passed into the createStore function.
    listeners.forEach(listener => listener()); //this calls the listener gotten from the subscribe method ie the react component 
  }
  
  subscribe = (listener) => { // allow listeners passed to it to subscribe to the store. They will always be notified whenever state changes
    listeners.push(listener); // array of listeners
    return () => { // returns the function used to unsubscribe, there is no dedicated method to that. Here is how it is called `subscribe(listener)()`
      listeners = listeners.filter(l => l !== listener); // this is how you can unsubscribe from a store. To unsubscribe the change listener, invoke the function returned by subscribe.
    }
  }
  
  dispatch({}); // This is to get initial state. It sends this empty action to run the reducers and get the initial state by defaulting to the default case in the switch statement. I think this happens in all reducers in your app.
  
  return { getState, dispatch, subscribe }; 
};


// --------------------------------------------------------------------- //
// --------------------------------------------------------------------- //

const Counter = ({ value }) => {
  <h1>{value}</h1>
}

const store = createStore(counter);

// function to render the state of the app in the document
const render = () => {
 ReactDOM.render(
   <Counter value={store.getState()}/>,
   document.getElementById('root')
 ); 
}

// pass the render function as a callback to subscribe
// Calls render whenever state changes
store.subscribe(render);

// call the render function for the first time
render();

// when button is clicked, dispatch an action of type increment
document.getElementById('inc').addEventListener('click', () => {
  store.dispatch({ type: 'INCREMENT'});
});

// when button is clicked, dispatch an action of type decrement
document.getElementById('dec').addEventListener('click', () => {
  store.dispatch({ type: 'DECREMENT'});
});