{"id":21585610,"url":"https://github.com/iamkanishka/angular-ngrx","last_synced_at":"2026-04-12T11:50:27.732Z","repository":{"id":121976639,"uuid":"458594901","full_name":"iamkanishka/Angular-NGRX","owner":"iamkanishka","description":"Integration of NGRX in to an Angular Application","archived":false,"fork":false,"pushed_at":"2022-04-24T17:12:00.000Z","size":838,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-24T15:34:46.719Z","etag":null,"topics":["angular","redux","rxjs","state","state-management"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iamkanishka.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-12T17:41:05.000Z","updated_at":"2022-04-16T13:32:43.000Z","dependencies_parsed_at":"2023-04-07T22:31:59.517Z","dependency_job_id":null,"html_url":"https://github.com/iamkanishka/Angular-NGRX","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamkanishka%2FAngular-NGRX","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamkanishka%2FAngular-NGRX/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamkanishka%2FAngular-NGRX/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamkanishka%2FAngular-NGRX/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iamkanishka","download_url":"https://codeload.github.com/iamkanishka/Angular-NGRX/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244189828,"owners_count":20412991,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","redux","rxjs","state","state-management"],"created_at":"2024-11-24T15:11:17.192Z","updated_at":"2026-04-12T11:50:22.711Z","avatar_url":"https://github.com/iamkanishka.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular - NGRX\n\n\u003cp align=\"center\"\u003e\n\u003ca  target=\"blank\"\u003e\u003cimg src=\"https://longnguyenduy.gallerycdn.vsassets.io/extensions/longnguyenduy/angular-ngrx-long/0.0.7/1577265251205/Microsoft.VisualStudio.Services.Icons.Default\" width=\"320\" alt=\"Coder Logo\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nWhat is NgRx?\n\nNgRx 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.\n\nWhy NgRx for State Management?\nNgRx provides state management for creating maintainable explicit applications, by storing single state and the use of actions in order to express state changes.\n\nSerializability\nBy normalizing state changes and passing them through observables, NgRx provides serializability and ensures state is predictably stored. This enables to save the state to an external storage, for example, localStorage.\n\nIn addition, it also allows to inspect, download, upload, and dispatch actions, all from the Store Devtools.\n\nType Safety\nType safety is promoted throughout the architecture with reliance on the TypeScript compiler for program correctness.\n\nEncapsulation\nUsing NgRx Effects and Store, any interaction with external resources side effects, like network requests, web socket and any business logic can be isolated from the UI. This isolation allows for more pure and simple components, and keep the single responsibility principle.\n\nTestable\nBecause Store uses pure functions for changing state and selecting data from state, and the ability to isolate side effects from the UI, testing becomes very straightforward. NgRx also provides tests setup like provideMockStore and provideMockActions for isolated tests, and a better test experience.\n\nPerformance\nStore is built on a single immutable data state, making change detection turn into a very easy task using an OnPush strategy. NgRx is also powered by memoized selector functions which optimize state query computations.\n\n\u003cb\u003e NGRX State Managment LifeCycle\u003c/b\u003e\n\u003cp align=\"center\"\u003e\n\u003ca  target=\"blank\"\u003e\u003cimg src=\"https://ngrx.io/generated/images/guide/store/state-management-lifecycle.png\" width=\"320\" alt=\"Coder Logo\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nWhy use NgRx Store for State Management?\nNgRx 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.\n\nWhen Should I Use NgRx Store for State Management?\nIn particular, you might use NgRx when you build an application with a lot of user interactions and multiple data sources, or when managing state in services are no longer sufficient.\n\nA good guideline that might help answer the question, \"Do I need NgRx Store?\" is the SHARI principle:\n\nShared: state that is accessed by many components and services.\n\nHydrated: state that is persisted and rehydrated from external storage.\n\nAvailable: state that needs to be available when re-entering routes.\n\nRetrieved: state that must be retrieved with a side-effect.\n\nImpacted: state that is impacted by actions from other sources.\n\nSo We will be Looking These Angular-NGRX  features and Learn as we go on.\n1. Introduction to angular NGRX State Managment -ngrx\n2. Understand Redux Pattern Structure. When to use and not to use NGRX in the Application\n3. How Store State,, Actions and Reducers will look like in NGRX Redux Pattern - Angular\n4. Implement Counter Application without NGRX and using and using Input Output Emitters - NGRX\n5. Implement the Counter Applicatioon using NGRX Store, Action and Reducers, Angular- NGRX\n6. Refactoring Store state Using Asyn Pipre for Selecting Observables state data - Angular NGRX\n7. Pass Custom Data using Props in Actions. Update State Datat in Reducer with Data - Angular NGRX\n8. Disadvantages of not using crrate seletctors for selecting the store Data in the NGRX - Angular - NGRX\n9. Using CreateFeatureSeletor and CreateSelector for getting the store data - Angular NGRX\n10. Implement Routing for the State Mangment NGRX Appliacation - - Angular NGRX\n11. Install Redux Chrome Extension and ngrx store dev tools for debugging Angular NGRX Application\n12. Introduction for Combining all the Different Modules of teh state into single AppState - Angular NGRX\n13. Implement the AppState in teh Angular NGRX Application by Combining all teh Fearure State\n14. Get Async Data from ngrx store using create Selector and Display it in the Table\n15. Create Reactive Form for Adding Post And Apply validation isung child routing - Angular ngrx\\\n16. Adding Posts into ngrx state submitted by the FOrm -  Angular NGRX\n17. Props in NGEX Selector. Sending arguments to the state selectors for updating Post  - Angular\n18. Update Post in NGRX store immutable with action in Angular NGRX\n19. Delete Post in the NGRX stor state in Angular NGRX \n20. Implement LazyLoading for the routes in the NGRX Application\n21. Lazy Load the ngrx state using for Feature store Module in Angular NGRX\n22. Design Auth Login Module in NGRX Angular Application\n23. NGRX Effects Library Introduction Manabge HTTP calls with Effects - Angular NGRX\n24. How to Define the NGRX Effect in Angular NGRX Application\n25. Adding Auth Features State for the Auth Module in teh Angular NGRX Application\n26. Implement first Effects file in  our Angular Application\n27. Save the User Token data from Login in NGRX State in Angular NGRX Application\n28. Implement Shared Loading Spinner Componenet in the NGRX Shared Module\n29. Implement Error Handling in ngrx Effects and Show Error Meessage when API Fails - Angular NGRX\n30. Navigating the page using routes with Effects after login Success in ANgular NGRX Application\n31. Create Signup Form and Ngrx actions in the angular ngrx application\n32. Add Signup Effects to make API Call and save the user token in the ngrx state- Angular NGRX\n33. Implement auto Login Functionality in the NGRX Angular Application\n34. Implement  Logout Functionality in the NGRX Angular Application\n35. Get Posts Data from backend HTTP API call using Effects in NGRX Angular \n36. Adding Post Data by making Http API Call by using Effects in NGRX Angular\n37. Update and Delete Posts Data with NGRX State Managment in teh Angular\n38. Implement auth User token for http API Calls using HTTP Interceptors in Angular\n39. Access ngrx State in CanActivate Route Guard for Protecting routes in Angular\n40. Fixing the Logout Bug to prevent multiple HTTP API Calls in the NGRX Angular\n41. Introduction to NGRX Router Store. Install Router Store for Dispatching Route Actions in Angular\n42. Implement Custom Serializer in NgRx Router to store only minimal Data in Router\n43. Use Router State Params in the Selectors to get Simple Post Data in Ngrx Angular Application\n44. Using Ngrx Router Store in teh Effects to get the posts datat in Ngrx Angular Application\n45. Introduction to Ngrx Entity, Entity Adapters and Entity State, How to use in Angular NGRX APP\n46. Implement CRUD Operations for Posts with NGRX Entity Adapter methods in Angular NGRX\n47. NGRX Entity Selector Adaptor Methods like Select All, Select Entities in Ngrx Angular Application \n48. Remove unwanted Http API Calls i Data is Already Present in Ngrx Store - NGRX Application\n49. Ngrx Entity Configuration Sort Compare - NGRX \n50. Introduction to NGRX Data. Simpify entity Store, effects and actions using NGRX Data - Angular","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamkanishka%2Fangular-ngrx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiamkanishka%2Fangular-ngrx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamkanishka%2Fangular-ngrx/lists"}