My realization and learning reactive way to know how to build and use the redux pattern in a angular app.
NOTE: I am learning stuffs for a build. New to StoreUtility and global state management in angular app.
This project was generated with Angular CLI version 11.1.4.
(source: https://www.ngxs.io/)
NGXS is a state management pattern + library for Angular. It acts as a single source of truth for your application's state, providing simple rules for predictable state mutations. NGXS is modeled after the CQRS pattern popularly implemented in libraries like Redux and NgRx but reduces boilerplate by using modern TypeScript features such as classes and decorators.
NGXS Concept: NGXS Concept
There are 4 major concepts to NGXS. Store: Global state container, action dispatcher and selector.
Actions: Class describing the action to take and its associated metadata
State: Class definition of the state
Selects: State slice selectors These concepts create a circular control flow traveling from a component dispatching an action, to a store reacting to the action, back to the component through a state select.
Easy Diagramatic View - LoginRadius
This source really helped me to understand the data flow and know the core points of redux state-management.
The store is a global state manager that dispatches actions your state containers listen to and provides a way to select data slices out from the global state.
NGXS is a state management pattern + library for Angular. It acts as a single source of truth for your application's state, providing simple rules.
Mainly reducers take 2 params
function reducer(state:State<any>, actions: enum[]) : State<any> { ... }Any action contains 2 things in it.
- type: SwitchCase to determine which action is requested to be execute...
- Payload: data which we are going to send as overhead to the performed action.
-
Http.Service.ts - Quick abstractions of HttpClientModule.
-
Api.Service.ts - The kind of API i am using just to have dummy data.
Custom Pipe: Guide For Pipe
Pipes are a useful feature in Angular. They are a simple way to transform values in an Angular template. ... A pipe takes in a value or values and then returns a value. This is great for simple transformations on data but it can also be used in other unique ways.
Angular Material Module UI component infrastructure and Material Design components for mobile and desktop Angular web applications.
For High Quality, Versatile, Frictionless and speedy implementions of building UI for your angular app.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.