We will be going through this article with the assumption that you already know how to use Redux. If you don’t, go ahead and learn to use it first. We have to know what Redux does to better understand how it does that.
Let’s first create our reducer function.
Then we are going to create the
createStore function which takes the reducer function as an argument and returns three methods. Namely,
dispatch , and
subscribe. We will also have the unsubscribe feature which is a function returned by the
Now when you call
store = createStore(reducer), all the methods will be available as
store.dispatch() etc. They don’t do anything for now, but that’s a step forward. Let’s move on.
We are going to get the methods working one-by-one now. First beginning with the
state variable points to the state of our application.
getState method just returns that variable. Pretty anti-climatic, huh? Invoking the
getState method will return
undefinednow. Because the
state variable’s value has not been set yet. Only the
dispatch method will set values to the
state variable. Next, we are going to write the
dispatch method takes an action object as the parameters. It then calls the
reducer function with the current
Earlier, we provided the
reducer function as an argument to the
createStore function to create the store.
We then set the
reducer function’s return value as the new state of our store. Now, if you call
dispatch and then
getState you will get the correct state of the store. Next, we are going to implement the
subscribe method takes a function as an argument and runs that function every time the state is changed via
It’s the Observer Pattern in action. All the functions we pass to the
subscribe method are stored in an array. Each time the
dispatch method is called, we loop through all the functions stored in that array, in our case the
subscribers array, and invoke all of them.
Now only the unsubscribe part left. The unsubscribe feature is returned as a function when we call the
subscribe method. Invoking this function will remove that particular subscriber from the
subscribers array. Let’s knock that off!
And that’s our Redux! Obviously it does not have all the bells and whistles the original Redux provides. We also did not include any error checking or whatsoever. But it’s a good starting point to understand how Redux works under the hood. I highly encourage you to read through the source code of Redux as the next step https://github.com/reduxjs/redux/