Recently, I’ve been performing some heavy lifting on my client project in the form of state management. For context, we use Angular on our front end, and need to keep tabs on all data points a user is changing. Our team chose to use NgRx, a state management tool based on React’s Redux package, but developed specifically for Angular.
I’ve developed an NgRx store for an entire feature as well as stabilizing it for another. In the process, I’ve learned a lot about what it takes to get one running smoothly. I’ll compile my knowledge in this short article for the sake of convenience.
Overview
If you are unfamiliar with both NgRx and React Redux, both are state management systems for frontend frameworks. This means that they are capable of storing and retaining information across multiple pages as you move through a website. Think of them as public file cabinets in an office. Anyone in the office, at any time, can go inside that cabinet and access a piece of information. The data remains inside that file cabinet, acting as the primary source of truth for everyone. We destructure these changes into what we call reducers, actions, selectors, and effects.
Reducers
Reducers in NgRx are what change the information in a specific part of the data. For example, if you have a complicated JSON object with multiple properties you won’t replace the whole object just for one changed property. Reducers simplify this process by taking in the single field you want to change and performing the update for you. This effectively only changes that single field. It will then notify the framework that the value has changed, bypassing the need for a manual object replacement.
Actions
Actions are triggered by reducers. When you call a reducer, an action is generated by NgRx. This action notifies NgRx what is about to happen, as well as what is expected to change.
One thing to note: NgRx discerns different actions by the string name you provide when setting it up. You must remember that when creating an action, you must name it something unique. Take into consideration other pre-existing state objects in your project as well. If the name is not unique, you will have two different actions firing off at the same time. This can lead to cross-contamination of data.
Selectors
Selectors do the opposite of Reducers – just as their name implies, they select data.
Contrary to actions, selectors know what state, as well as which part of state, they are looking at. You pass in the feature state as a parameter to a selector to retrieve the data you want. This follows naturally – Typescript needs to know what property it is attempting to access by providing a type. If you don’t provide the feature state, it will not know where or what it should be looking for.
Effects
Effects in NgRx serve the purpose of updating state after an external action takes place that has a direct impact on the stored data. Say you want to make an API call that will have a direct impact on the data stored in your state. You can develop an effect within your NgRx object that will make the request for you. It will transform/extrapolate the requisite data, and then call the needed actions to save or modify the state with the new information.
This is especially useful – it can reduce the amount of code needed on the component level to process and save data. This places the complex logic further back and lightens the component itself.
Facade
This is not a typical part of an NgRx state machine – our team has decided to create this for the sake of modularity. We designed a facade for our NGRX state to swap state machines, should the need ever arise. This also gives us the added benefit of being able to call several actions sequentially.
Think of the Facade as a wrapper class. A set of functions and variables is provided to the front-facing code, which can receive data to work with. It will then transport this data between the state machine and the UI, through either actions or selectors. Swap-ability between state machines comes from the abstraction that the facade provides, as the actual interaction happens here. So, instead of directly calling NgRx from the component, the facade does it on behalf of the front end.
Wrap
So, to condense the above information:
- NgRx is a state management system built for Angular, based on React Redux.
- Reducers store information inside of the state machine.
- Actions are what actually deposit the data.
- Selectors retrieve said data.
- Effects can create data from an outside source.
- Facades, while not necessarily part of the NgRx pattern, act as an abstraction layer. They can simplify the means of passing along instructions to the state machine.