Demystifying the Redux Store
Despite being a very small and lightweight library Redux is often very confusing for both beginner and intermediate developers. Even if you have worked with Redux for a while it can still be confusing to visualize how Redux works behind the scenes to manage state in a predictable manor. In this article we will walk through the Redux store in depth and I will show you exactly how the Redux store works by building a custom store from scratch.
Before we get started we need to understand what the Redux store is
In Redux the store is where all the magic happens. It serves as the single store of information for our entire application. You might think that because of this the Redux store would be pretty complex, however this is not the case. The Redux store is simply an object that contains a few properties that return functions. We can see this if we log the store to the console from a redux application. Doing so shows the following:
The first three properties are the most used in Redux, and thus they will be the ones we will use for our purposes. What is interesting to note is that the internal state of the store is not accessible here. Meaning that the state is not a property that we can directly modify. The only way that we can get the state of our store is by calling the getState method; and the only way to update or change the state is by dispatching an action to the store. This is because the internal state of the store is actually a private property of the store object.
What is a private property and how can we implement one in JavaScript?
A private property is a concept that you might be familiar with if you have experience with Object Oriented Programming. It is a property that operates “under the hood” (part of the internal interface). These properties are considered to be “protected” because they can be accessed from inside other methods; but not from the outside. To demonstrate this better we will create a private property below:
In our function above we declared a variable called state but we did not initialize it’s value. This allows the state variable to be stored alongside the object that is returned as a result of calling the createStore function as Persistent Lexically Scoped Reference Data. The other important thing to note is that we did not call state as a property directly on the returned object. Doing so initializes store as a public property and thus would allow direct mutation of the store from the returned object like so…
Now that we properly created a private property we can get the current state of the store by dispatching the getState function with the following…
This code returns undefined because the state variable is uninitialized. to change the state then we need a way to update the value. In Redux we do this with actions. We can create an action dispatcher like so…
Handling Actions With An Action Dispatcher
The first step of the dispatch function is to call the reducer. When we create a store using Redux (using createStore) we pass a reducer in as a parameter. This means that for our store we have to add it as a parameter in our custom store function. This allows us to access the reducer function from dispatch similar to how we can access state from getState. When creating a reducer in Redux we initialize it with a state and an action. So when we call the reducer in our custom store we will pass the parameters in as well. The reducer then computes the new store value and returns it to the store. In order to save this updated value we initialize the value of state to the returned value from the reducer. This leads me to one of the most misunderstood concepts of Redux. Many people believe that when you dispatch an action you call the reducer directly. This is not the case. The store contains the dispatch action not the reducer it’s self. It is this two way sync that allows Redux to work efficiently and powerfully to manage a single source of state throughout our application.
Subscribing To The Store
Awesome! So now we have a way of updating the state in our application. But how do we notify the UI that the state has changed so they can update the information? We can achieve this by creating a subscribe function like so…
The subscribe function takes a listener. When UI components subscribe to the store they are added to an array of listeners that is automatically notified of state changes by the dispatch function. This works because the listener is a function that is stored on the listeners array and then called using the for loop from the dispatch function.
Conclusion
So there you have it! That is the entire process of how the Redux store works. As you can see something that seemed very intimidating at first is actually very simple. Hopefully this has helped clarify the process of Redux so you can more effectively implement it in your applications!