NgRx is the typical tool for handling domain data with an Angular application

NgRx/Store

A quick tutorial on working with data in an Angular application

Angular is a framework for creating the front-end for web applications. However, it is purely geared toward creating visual components, not for handling domain data. That’s where NgRx comes in. It’s a library for working with data on the front end in a “Flux” pattern, which is a slight variant of MVC (I like this explanation of it: Flux vs MVC). All modern web frameworks have a typical library like this for handling data. For React, the library is Redux. For Vue, it’s Vuex.

Working With Data In An Angular App, NgRx/Store

Some quick terminology:

• store: a javascript object that holds your data
• state: the store’s data at a given point in time
• slice: a property of your store (so just a section of your overall data)
• reducer: a pure function for altering your state
• action: a key and some values used to tell the reducer what slice of state you want to change
• dispatch(): a method used to run actions
• subscribe(): a method used to detect state changes

In a nutshell, using NgRx will look like this:

1. import the store at root
2. create a reducer for defining and changing state
3. import the store and any reducers in your component
4. use your reducer by dispatching actions to it
5. subscribe to the store to detect when data is changed

Passing data between Angular components can become a nightmare, unless you use a tool like NgRx

What This Tutorial Covers

1. Installation / Set Up
2. Reducers & Actions
3. Dispatching Actions
4. Subscribing
5. Testing

What You Need For This Tutorial