What is NgRx?

Get introduced to NgRx and learn how it works with Angular.

We'll cover the following

Introduction to NgRx

NgRx is a framework that implements the Redux pattern to build reactive applications in Angular.

NgRx packages

NgRx provides various packages to implement different functionalities in our Angular applications. We’ll learn about the following libraries in this course:

State

  • @ngrx/store: A Redux-based state management library for Angular. It is the only library required to work with NgRx.

  • @ngrx/effects: It helps us handle side effects in the @ngrx/store.

  • @ngrx/router-store: It connects our Angular router to the @ngrx/store.

  • @ngrx/entity: It helps us manage entity collections.

  • @ngrx/component-store: It helps us manage local states in our Angular components.

Data

  • @ngrx/data: It helps us manage entity data.

View

  • @ngrx/component: It helps us generate reactive Angular templates.

Developer tools

  • @ngrx/store-devtools: It helps us debug the @ngrx/store efficiently.

  • @ngrx/schematics: It helps us scaffold Angular applications using NgRx libraries.

  • ESLint Plugin: It helps us maintain the best practices in our NgRx codebase.

NgRx state-management lifecycle

NgRx manages application states by following Redux principles. Although they share the same basic principles, NgRx provides some extra features to help manage the state.

  • Store: The first thing to understand about the NgRx Store is that it is a singleton. This means that there can only be one Store in an Angular application. The Store is created when the application bootstraps. Bootstrapping is the process of initializing an Angular application. The bootstrap process sets up the NgRx store and injects it into the root AppComponent. From there, the store is available to any child component that injects it.

  • Actions: Once the store is injected into a component, the component can dispatch actions to the store. Dispatching an action is done using the store’s dispatch() function. The dispatch() function takes an action object as an argument. The action object must have a type property. The type property is used by the store to determine how to update the data in the state.

  • Reducers: The store updates the data in the state by calling the reducer function. The reducer is a pure function that takes the current state and an action as arguments and returns a new state. The store uses the reducer to update the data in the state. The new state is emitted to all of the store’s subscribers.

  • Selectors: Subscribers are components that have subscribed to the store using the Store’s subscribe() function. The subscribe() function takes a callback function as an argument. Subscribed components receive the new state as an argument to the callback function. The use of NgRx selectors can help keep code DRY by allowing us to extract specific pieces of state from the store.

  • Effects: NgRx Effects is a library that allows us to create side effects based on NgRx actions. For example, let’s say we have a component that needs to make an HTTP request when a particular action is dispatched. With NgRx Effects, we can create an effect that will listen for that action and make the HTTP request. NgRx Effects may use Angular services to retrieve data from the database

The following figure summarizes the NgRx state-management lifecycle: