Concept of Actions and Reducer with Angular NgRx

As you all know, it is important to understand how reducer works, if you want to create a web either using React or Angular. It turns out, I do not understand it properly! How do I know this? Well, I tried to make a feature of, for example, increase a volume on music play application. However, the volume indicator flickering when I press the increase button. Oh well….. This is why I will write a summary about what reducer is and how to use it, so you can have a web that can render and change value properly (where the final value will stay as what the user wants, not going back and forth between previous state and the new state). Since I have been working with Angular, I will make this blog post specifically about Angular NgRx.

Let’s start from the basic definition. Redux is a design pattern that keeps all application data in a single Javascript Object. This gives you a predictable data of state in any given time. What does it mean??? As we know, in Angular (and React), in order to update the value of a variable in web app, we can’t just do assignment operator (e.g. volume_setting= 50). This is where Redux comes into play: Redux is used to handle a change in state in your web application. This means, if you perform any action on the UI side (such as clicking the turn up/down button in a music player app), the app should give the expected output. Now, let’s make it simple, we will just create a function called INCREASE_VOLUME, to cover the need of users increase or decrease volume.

Shawn Wassell, in his React course, explained the case of having multiple child components that can manage their own state. Although he talks about React, the concept of Redux works in similar way in Angular. One drawback he mentioned about using this design is that it will create a problem when components that are far from each other in the DOM, want to share data to each other. To solve this problem, we can use a concept of global state, in this case, all components share the entire state in this situation. But, using this concept can also create another problem. Why? Because there is no rules how each components interact with or access the state. So, you will end up with “an application filled with transients hard to create bugs to occur because of the inconsistency state”. Unrestricted global state is not something that you want to create; Redux plays the role of creating the restriction here!

On the left: system with redux, where redux creates restriction based on component initiating chages. On the right: system without redux, which can create a chaos, as we don’t know how the component is sending state and data. Diagram was copied from this blog.

Shawn mentioned about one of the core concept of Redux is that “we have a central global state, that is called Redux store”. Remember, global state has all components connected to each other. This Redux store is eventually a big JSON object, that holds all the data. In other words, it holds anything that loads from a server or any internal application states that we need to keep track of.

Redux store contains of 2 things: actions and reducers. Actions are JSON objects containing of action type and payload. The purpose of actions is to explicitly define 2 different events that can occur at given time. Example of action type, in this blog, will be INCREASE_VOLUME, with the payload contains the idea of the volume setting that user just increase. On the other hand, reducers is redux way of specifying what action should happen to the redux store when a given action occurs.

In the example, when INCREASE_VOLUME occurs, we set the volume property in the redux store to the setting data through the action payload.

Diagram of how Redux action interacts with reducers to send a state and update the data

In conclusion, our components are only allowed to make changes to the state by triggering this pre-define action (type). The only changes to these states that are allowed to take place in app are the corresponding changes that we specify in our reducer (change volume). This whole redux process creates a unidirectional data flow, as seen in diagram below

Unidirectional data flow in Redux using action and payload

Jeff Delaney explained the above diagram as below:

“We have an UI that is displaying some data. User then performs an action to change the data, which we need to dispatch an action in redux. This action will go to reducer function that copies the current state of the application, along with data changes with the new JavaScript object (through payload). It is important to note that state is immutable, means it can’t be change directly, it has to be copied over to the whole brand new state. The reason of this is to give a predictable tree of state changes that we can use to debug an application, and that’s the main benefit of Redux. Once reducer is created the new state, it can save a data store which can be thought as a client side database.”

Jeff describes the use of Observable in NgRx to represent datastore. Observable acts as a subscription to component states all over the application, which share the same data at any given point in time.

Hope this clears the basic understanding of using Redux (NgRx) in Angular (or React), and you can follow Jeff’s tutorial to use NgRx in this link.

Happy learning!