NgRx is a framework for building reactive applications in Angular with the Management of States. NgRx is inspired by the Redux pattern - unifying the events in your application and deriving state using RxJS. At a high level, NgRx stores a single state and uses actions to express state changes. It makes Angular development easier by simplifying the application’s state in objects and enforcing unidirectional data flow. It is established with 5 main components - Store, Actions, Reducers, Selectors, and Effects.

1. Presented By:
Alka Vats & Paras Jain
Angular State
Management-NgRx

2. Lack of etiquette and manners is a huge turn off.
KnolX Etiquettes
Punctuality
Respect Knolx session timings, you
are requested not to join sessions
after a 5 minutes threshold post
the session start time.
Feedback
Make sure to submit a constructive
feedback for all sessions as it is
very helpful for the presenter.
Silent Mode
Keep your mobile devices in silent
mode, feel free to move out of
session in case you need to attend
an urgent call.
Avoid Disturbance
Avoid unwanted chit chat during
the session.

3. Our Agenda
01 Introduction to NgRx
02 What is NgRx Store?
03 NgRx and Redux
04
Using store states, actions and
reducers in NgRx
05 Demo

4. ● Unlike backend applications, which use databases for state management, frontend
applications need some sort of mechanism for handling data.
● This data can range from server responses gotten from HTTP request, to form
input data and user routes.
● It’s is always a good practice to compose all your application state in a central
store for easy management and data communication. So for this the Angular State
Management comes under working.

5. ● NgRx is a group of Angular libraries for reactive extensions and state management. It
makes Angular development easier by simplifying the application’s state in objects and
enforcing unidirectional data flow.
● A complete state management system should enable you to model a state.
● Example:
create a simple representation of what the state should look like, update its value,
monitor the state when the value changes, and retrieve the values of the state.
Introduction to NgRx

6. NgRx provides libraries for:
● Managing global and local state.
● Isolation of side effects to promote a cleaner component architecture.
● Entity collection management.
● Integration with the Angular Router.
● Developer tooling that enhances developer experience when building many
different types of applications.

7. NgRx packages are divided into a few main categories
● State
○ Store - RxJS powered global state management for Angular apps, inspired by
Redux.
○ Effects - Side effect model for @ngrx/store.
○ Router Store - Bindings to connect the Angular Router to @ngrx/store.
○ Entity - Entity State adapter for managing record collections.
○ ComponentStore - Standalone library for managing local/component state.

8. ● Data
○ Data - Extension for simplified entity data management.
● View
○ Component - Extension for fully reactive Angular applications.
● Developer Tooling
○ Store Devtools - Instrumentation for @ngrx/store that enables visual tracking of
state and time-travel debugging.
○ Schematics - Scaffolding library for Angular applications using NgRx libraries.
*Note: In this session, we’ll mostly focus on the Store library. Specifically, we’ll demonstrate how
Angular components can get values from a single store.

9. The NgRx Store is a Redux-inspired state management system that enables you to use
observables to manage state in an Angular application.
Ngrx is a group of Angular libraries for reactive extensions.
Store is a controlled state container designed to help write performant, consistent
applications on top of Angular.
The primary advantage to using the NgRx Store is the ability to store all state in a single
tree that is accessible from any part of the application.
NgRx Store is mainly for managing global state across an entire application. In cases
where you need to manage temporary or local component state, consider using NgRx
ComponentStore.
What is NgRx Store?

10. NgRx and Redux
NgRx uses the Redux pattern, which is comprised of three main concepts:
i.e:- STORE , ACTIONS , REDUCERS
1. Store: A central area(store) that holds all of the application state.
2. Action: It describes all the changes in the state of the application after and
before an event is performed.
3. Reducers: It tie the store and actions together by using the defined action to
carry out a state transition, depending on the action.

12. Using store states, actions, and reducers in NgRx
In this, we’ll demonstrate how to use store states, actions, and reducers to simplify state
management in Angular.
Store state:
A store is basically a JavaScript object that holds data we’ll be using in our application.
A simple store takes the following format:
const state = {
persons: [
{
name: "Wisdom Ekpot",
},
{
name: "John Cat",
}
]}

13. Actions:
Actions are methods dispatched by the component when an event is called.
Here you can define a type and also the payload it will be sending:

14. Reducers:
The createReducer method handles state transitions.
To access the state, we have to import the initial state into the reducer file. To
trigger an action, we use the on event, which takes the name of the action as a
parameter:

15. DEMO

16. References
● https://ngrx.io/docs
● https://blog.logrocket.com/angular-state-management-made-simple-with-ngrx/
● https://blog.angular-university.io/angular-2-redux-ngrx-rxjs/

17. Thank You !
Get in touch with us:
Lorem Studio, Lord Building
D4456, LA, USA