Scribd
Upload
3 views5 pages

NGRX FrameWork For Angular (@ngrxstore)

NgRx is a framework for building reactive applications in Angular, providing state management, side effect isolation, and developer tools. It is particularly useful for applications with extensive user interactions and multiple data sources, utilizing concepts like actions, reducers, and selectors. NgRx can be integrated into Angular applications through npm, Yarn, or Angular CLI, and includes built-in runtime checks for state and action integrity.

Uploaded by

dineshreddyz93
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views5 pages

NGRX FrameWork For Angular (@ngrxstore)

NgRx is a framework for building reactive applications in Angular, providing state management, side effect isolation, and developer tools. It is particularly useful for applications with extensive user interactions and multiple data sources, utilizing concepts like actions, reducers, and selectors. NgRx can be integrated into Angular applications through npm, Yarn, or Angular CLI, and includes built-in runtime checks for state and action integrity.

Uploaded by

dineshreddyz93
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

NgRx FrameWork For Angular

NgRx is a framework for building reactive applications in Angular. NgRx provides


state management, isolation of side effects, entity collection management, router
bindings, code generation, and developer tools that enhance developers experience
when building many different types of applications.

NgRx for State Management:

NgRx provides state management for creating maintainable explicit applications, by


storing single state and the use of actions in order to express state changes.
●​ Serializability
●​ Type safety
●​ Encapsulation
●​ Testable
●​ Performance

When Should I Use NgRx for State Management:

you might use NgRx when you build an application with a lot of user interactions and
multiple data sources, when managing state in services are no longer sufficient.

SHARI principle:

●​ Shared: state that is accessed by many components and services.


●​ Hydrated: state that is persisted and rehydrated from external storage.
●​ Available: state that needs to be available when re-entering routes.
●​ Retrieved: state that must be retrieved with a side-effect.
●​ Impacted: state that is impacted by actions from other sources.
@ngrx/store:
Store is RxJS powered state management for Angular applications, inspired by
Redux. Store is a controlled state container designed to help write performant,
consistent applications on top of Angular.

Installation

Installing with npm link:

npm install @ngrx/store --save

Installing with Yarn:

yarn add @ngrx/store

Installing with ng add:

ng add @ngrx/store

Diagram:
The following diagram represents the overall general flow of application state in NgRx.
We have three main concepts in above architecture :
1.​ Actions
2.​ Reducers
The reducer function
●​ Defining the state shape
●​ Setting the initial state
●​ Creating the reducer function
Registering root state
Register feature state

3.Selectors
​ Using a selector for one piece of state
​ Using selectors for multiple pieces of state
​ Using selectors with props
​ Selecting Feature States
​ Resetting Memoized Selectors
​ Using Store Without Type Generic
​
4.Meta-reducers
​ Using a meta-reducer to log all actions
Using Dependency Injection:

Injecting Reducers:

To inject the root reducers into your application, use an InjectionToken and a Provider to
register the reducers through dependency injection.

Injecting Meta-Reducers:

To inject 'middleware' meta reducers, use the META_REDUCERS injection token


exported in the Store API and a Provider to register the meta reducers through
dependency injection.

Injecting Feature Config:

To inject the feature store configuration into your module, use an InjectionToken and a
Provider to register the feature config object through dependency injection.

Using Store in AngularJS:


If you are working on an AngularJS to Angular conversion, you can use @ngrx/store to
provide global state to your hybrid application.

Downgrading Store service:

If you want to dispatch an action or select some slice of your store state, you will need
to downgrade the Store service to use it in the AngularJS parts of your application.

We use below import statements for getting ngrx/store into Angular:

import { Store, select } from '@ngrx/store';


import { downgradeInjectable } from '@angular/upgrade/static';

Runtime checks:
@ngrx/store ships with five (5) built-in runtime checks:

●​ Default On:

○​ strictStateImmutability: verifies that the state isn't mutated.

○​ strictActionImmutability: verifies that actions aren't mutated

●​ Default Off:

○​ strictStateSerializability: verifies if the state is serializable

○​ strictActionSerializability: verifies if the actions are serializable

○​ strictActionWithinNgZone: verifies if actions are dispatched within

NgZone

○​ strictActionTypeUniqueness: verifies if registered action types are

unique

All checks will automatically be disabled in production builds.

You might also like