Javid Salim
3 min readFeb 13, 2023

In this episode i will create redux from scratch and implement it on html with vanilla js. For that reason i will use some screenshots. And will explain all code lines with comments

First things first. Let’s create project like below

You see that in my project there are simple html and two js files. Inside html i created one heading and two buttons. The purpose of this buttons are to increment and decrement headings inner html.
in redux.js file i created simple createStore function

As you can see our createStore functions accepts reducer. It has own state and list of listeners. But listeners is empty and state is undefined now. To get our state dynamically we create getState method. After that we create our dispatch function which takes action object and sets state. And after that calls every listeners and puts our state inside it. Very accurate implementation. Below dispatch function we have another method subscribe. subscribe method helps us to call it and put inside the methods which we want to call every dispatch. That is awesome. Below subscribe we have a line. For first time when we call create store it create firts state after all that we return this methods. Now lets look how to utilize this createStore method

as you see we create variables and hook the elements in html. And define initialState. Then create reducer like original redux reducer implementation. Then create a store from preimported file. And how i metioned before we create the method which changes inner html of heading. In the next slide we will subscribe to this method

in the line 42 we subscribe the update method. On event listeners we call dispatch methods. This implementation was very simple. But i hope this was very helpfull for understanding. At the end i put the screen from the project.