Albiorix’s Angular development team delivered an interactive session on Angular NgRx. The overall session was very engaging and informative. During the session, we covered a wide range of topics related to Angular NgRx, including: Introduction to NgRx and its benefits Concept of using State Management in Angular Working of Angular NgRx Concept of using State Management in Angular Managing complex application states with ease Best practices and advanced techniques in NgRx implementation Special thanks to the Angular Development Team for their exceptional expertise and dedication in delivering this successful session. Your commitment to empowering the Angular community is truly commendable! Want to be a part of such enthusiastic team, reach out to us at https://www.albiorixtech.com/careers/

1. NGRX
Angular
PresentedBy:
Gaurang Patel
Nirav Karathiya

2. 01
Use of NgRx
02
Elements of NgRx
03
04 How NgRx Works?
05 Example
06 Thank You
State Management In Angular

3. State Management In Angular
In Angular, each component has its own state, to share the data/state between the
components we normally use @Input and @Output decorators, but when the
application goes bigger, its challenging to maintain the data consistency. So to solve
this problem, NgRx was introduced.

4. Use of NgRx
Daily website visits
Daily signups
• Managing global and local state.
• Isolation of side effects to promote a cleaner component architecture.
• Integration with the Angular Router.
• Developer tooling that enhances developer experience when building
many different types of application(Redux-devtools)

5. Elements of NgRx
NgRx packages are divided into a few main categories
Store
01
Selector
02
Reducers
04
03 05
Actions Effects

6. Store
NgRx Store provides state management for creating maintainable, explicit
applications through the use of single state and actions in order to express state
changes. In cases where you don't need a global, application-wide solution to
manage state, consider using NgRx ComponentStore which provides a solution
for local state management.
Installation: npm install @ngrx/store--save

7. Selector
Selectors are pure functions used for obtaining slices of store state. @ngrx/store
provides a few helper functions for optimizing this selection.
When using the createSelector and createFeatureSelector functions @ngrx/store
keeps track of the latest arguments in which your selector function was invoked.

8. Actions
Actions express unique events that happen in our application. These events range
from application lifecycle events, user interactions, to network requests. Actions
are how the application communicates with NgRx to tell it what to do.
• Each actions must have different name.
• dispatch() used to trigger the particular action.
• Actions help you to understand how events are handled in your application.

9. Reducers
NgRx also provides a powerful set of reducers, which are functions that specify
how the state should change in response to an action. One of the core concepts in
NGRX is immutability, which means that the state should never be modified
directly.
Reducers in NgRx are responsible for handling transitions from one state to the
next state in your application. Reducer functions handle these transitions by
determining which actions to handle based on the type.

10. Effects
Effects handle the side effects of each Action. These side effects range from
communicating with an external API via HTTP when a certain Action is dispatched
to dispatching another Action to update another part of the State.
Installation: ng add @ngrx/effects

11. 11
How Ngrx Works ?

12. https://github.com/niravkarathiya/DynamicForm
https://github.com/niravkarathiya/ShoppingCart
Github repository:
Dynamic Form
Firebase Hosted link: https://dynamic-form-faa62.web.app/
https://shopping-cart-ngrx.web.app/
Shopping Cart
Github repository:
Firebase Hosted link:

13. If there is missing import statement for store and effect or don't add as per the above
snapshot than facing following issue :
1. data store actions instead of state in dev tool kit
2. effect not called while dispatch the action
Note (runtimeChecks) : This warning is coming because in NgRx < 8, to make store immutable, we need to
use ngrx-store-freeze library. In NGRX 8, you can opt-in to make store immutable without ngrx-store-
freeze [as it is in build now in NgRx 8]. This warning will go away if you opt in-store immutability by
specifying runtimeChecks property in StoreModule.forRoot
Challenges Faced

14. Thank You
Contact Us:
(+91) 991-308-8360 / +1 (912) 528-5566
inquiry@albiorixtech.com
live:albiorix.tech
For More Information Visit Us At:
www.albiorixtech.com