Create a simple library similar to redux

I had been fascinated with redux library for a while now, because of how easy it had made the development cycle for the developers, you just define one single state and poof it handles everything and every scenario of the application. So I decided to get my hands dirty and create a library similar to that, But for now this library will only have certain functionalities or say the basics which we learn in our tutorial. We will cover 3 core functions which are getState, dispatch and then subscribe. What do they do ?

getState: gives the current state of the application,

dispatch: a function handler which modifies the state

subscribe: a callback after the dispatch has been called

Let’s get it started, create a new folder (obviously) then yarn init to initialize our library so that we can later test it , if it is working or not. So fill up your info in the package.json file which may look like this :

package.json file of our application

the contents may differ (wink wink), now inside create a folder say src (which) will contain the main component of our library. Hope we have same folder structure such as :

Folder Structure

After creating the file as above we now edit the create store , initially it will be something as :

const createStore = (reducer) => { 
// to create a store we pass a reducer
let state;
const getState = () => state; 
// a simple function to get the current state
}
Now we add the dispatch function :
const createStore = (reducer) => { 
  // to create a store we pass a reducer
let state;
const getState = () => state; 
// a simple function to get the current state
const dispatch = (action) => {
   state = reducer(state, action);
  // we simply call the reducer as all the logic lies there . 
 }
}

But wait how does our application know that an action has been called ?? This is where the subscribe function is handy , we add a callback to the subscribe function which in return is updated with the new values. So now our Store becomes something like this :

const createStore = (reducer) => { 
// to create a store we pass a reducer
let state;
let listeners = [];
 const getState = () => state; 
// a simple function to get the current state
const dispatch = (action) => {
 state = reducer(state, action);
// we simply call the reducer as all the logic lies there
 listeners.forEach(listener => listener());
}
const subscribe = (listener) => {
   listeners.push(listener);
  // unsubscribe method to remove this particular listener
  return () => {
    listeners = listeners.filter(l => l != listener);
   }
  }
}

Now at the end we add a dispatch that will return us an empty state and as well we expose our 3 functions, something like this :

Basic createStore completed

Now that we have finished our basic store lets again expose it from our index file which will be something like this :

exposing our main function to create store

Clap Clap the library has been made.

library code : https://github.com/karkipy/redux-clone/tree/phaseOne

To test this library

test code: https://github.com/karkipy/redux-clone/tree/phaseOne-Test