NgRx Store - The Basics

Introduction

The NgRx Store is a common framework you may come across in a lot of Angular applications, and for good reasons. The main reason is the ability to group, organize and funnel data, which can present many benefits not just for the application itself, but also for the developer. In this post, we will discuss the basic fundamental pieces of the NgRx framework and how we can use it to its full potential.

NgRx - State and Accessibility

The State is where the state of the application is defined and managed. The Initial State is where we can have the ability to set values that we want our state to start off with, under the type rules that are set in the implemented interface. For complex applications, it allows us to nest one state with even more states, called Feature States, in a sort of parent-child relationship, in order to organize datasets that fall under certain categories.

The State is immutable and read-only, and in order for angular components to access the current state of the store, they do so with the aid of Selectors. Selectors allow angular components to not only receive data, but also in a specific format that eases the job of that component. We are able to chain selectors the same way we nest the state structure.

NgRx - Actions

In order to trigger changes and send data to the store, we must first dispatch an action. Actions are one of the fundamental pieces when implementing NgRx. They can capture everything from interactions made by the user in the front end to data received from APIs.

Defining an action:

Dispatching an action:

Creating actions require little to no effort at all, which allows us to categorize them based on the source of the event(where the action is coming from). Using this technique can aid us during application debugging. For example, in an application with a complex store structure, the best practice in naming actions is with the addition of square brackets, with the name of the event source between them.

export const AddOne = createAction('[Counter] Add One to Counter');

NgRx - Payloads and Sending Data

Data being exchanged by actions is known as a Payload. We can send payloads using Creator Functions, which is taken as a second parameter by the action creator. These payloads would then be sent and assessed by the two action handlers: Effects and Reducers.

NgRx - Effects

The sole purpose of an Effect is to communicate data from the dispatched action to a service which is then forwarded to the API. But, effects are built to handle more than just mere service calls. To understand the full potential of effects, lets add a couple more actions to the mix.

Shown in the snippet above, we have the action "LoadCounter" from before, now accompanied by two other actions that represent the success and fail events of the service call. When dealing with services, the success action must have a payload, which is basically the data that is sent back in a successful service call. And as you would have guessed, the payload in the fail action would contain the error returned by a faulty service call. These actions are to be treated as "side effects." Their payloads are then placed in the new state returned by the Reducer.

NgRx - Reducers

And finally, reducers. Think of reducers as "state transition handlers." With the state being a read-only property, reducers are only able to return a new state with the help of the spread operator(represented with "..."). Because of this behavior, the state remains consistent, which provides us with the ease of predictability(especially in debugging).

As far as the implementation, lets go back from dealing with effects and services to just simply adding one to the counter. For the reducer function to act upon and be registered under a certain action, it must specified in the "on" function. The On function also takes in the initial state before returning a new state with all of the same properties that are not expected to change. We can then specify the property(counter) and assign its new value.

Conclusion

In this blog post, I have covered the fundamental building blocks of the NgRx Store in hopes to give us all enthusiasts a better understanding of the framework structure. Despite its undeniable learning curve, deciding whether or not to implement the NgRx Store is definitely a worthy discussion to be had with our fellow developers when designing an application.

To learn more about the many intricacies of the framework, click here and visit the official NgRx website: https://ngrx.io/