{"id":20822431,"url":"https://github.com/sounishnath003/redux-pattern-angular-app","last_synced_at":"2026-05-02T08:31:55.723Z","repository":{"id":54623433,"uuid":"336836111","full_name":"sounishnath003/Redux-pattern-angular-app","owner":"sounishnath003","description":" 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.","archived":false,"fork":false,"pushed_at":"2021-02-22T10:13:35.000Z","size":390,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-19T17:26:43.896Z","etag":null,"topics":["angular","clone","google-drive","ngrx","redux"],"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/sounishnath003.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}},"created_at":"2021-02-07T16:41:18.000Z","updated_at":"2023-03-04T09:51:48.000Z","dependencies_parsed_at":"2022-08-13T21:50:46.832Z","dependency_job_id":null,"html_url":"https://github.com/sounishnath003/Redux-pattern-angular-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sounishnath003/Redux-pattern-angular-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sounishnath003%2FRedux-pattern-angular-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sounishnath003%2FRedux-pattern-angular-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sounishnath003%2FRedux-pattern-angular-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sounishnath003%2FRedux-pattern-angular-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sounishnath003","download_url":"https://codeload.github.com/sounishnath003/Redux-pattern-angular-app/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sounishnath003%2FRedux-pattern-angular-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32528141,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-02T01:12:54.858Z","status":"online","status_checked_at":"2026-05-02T02:00:05.923Z","response_time":132,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","clone","google-drive","ngrx","redux"],"created_at":"2024-11-17T22:15:00.067Z","updated_at":"2026-05-02T08:31:55.696Z","avatar_url":"https://github.com/sounishnath003.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Redux-Pattern-Angular-App\n\nMy realization and learning reactive way to know how to build and use the **redux pattern** in a angular app.\n\u003cbr\u003e\nNOTE: I am learning stuffs for a build. New to StoreUtility and global state management in angular app.\n\n\u003cbr\u003e\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.1.4.\n\n![NGXS-STORE-LOGO](https://firebasestorage.googleapis.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-L9CoGJCq3UCfKJ7RCUg%2F-Lqo8CEiTGbFfHN-MPem%2F-Lqo8Eji2N8XvyACYQ-W%2Flogo.png?generation=1570685386501621\u0026alt=media)\n\u003cbr\u003e\n(source: https://www.ngxs.io/)\n\n\u003chr\u003e\n\n## What is NGXS❓\n\nNGXS 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.\nNGXS 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.\n\n## NGXS Concept: [NGXS Concept](https://www.ngxs.io/concepts)\n\nThere are 4 major concepts to NGXS.\nStore: Global state container, action dispatcher and selector.\n\n**Actions:** Class describing the action to take and its associated metadata\n\n**State:** Class definition of the state\n\n**Selects:** State slice selectors\nThese 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.\n\n# Easy Diagramatic View - [LoginRadius](https://www.loginradius.com/blog/async/angular-state-management-with-ngxs/)\n\nThis source really helped me to understand the data flow and know the core points of redux state-management.\n![FLOW-DOM-TREE-UPDATION](https://www.loginradius.com/blog/async/static/e7078db45932adcc702097caf1919a23/e5715/redux.png)\n\n## The Global Storage\n\nThe 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.\n\n## Angular State Management With NGXS\n\nNGXS is a state management pattern + library for Angular. It acts as a single source of truth for your application's state, providing simple rules.\n\n![FLOW-DIAGRAM-NGXS-UTILIFY](https://www.loginradius.com/blog/async/static/11800c1071c0ff7f8e9b3161611001aa/03979/title-image.png)\n(Source: https://www.loginradius.com/blog/async/angular-state-management-with-ngxs/)\n\n## Directories and Flow of Reducer-Action:\n\nMainly reducers take 2 params\n\n```ts\nfunction reducer(state:State\u003cany\u003e, actions: enum[]) : State\u003cany\u003e { ... }\n```\n\nAny action contains 2 things in it.\n\n1. **type**: SwitchCase to determine which action is requested to be execute...\n2. **Payload**: data which we are going to send as overhead to the performed action.\n\n## Service Injection: Providers\n\n- [Http.Service.ts](https://github.com/sounishnath003/Redux-pattern-angular-app/blob/master/src/app/services/http.service.ts) - Quick abstractions of HttpClientModule.\n\n- [Api.Service.ts](https://github.com/sounishnath003/Redux-pattern-angular-app/blob/master/src/app/services/api.service.ts) - The kind of[ API ](https://www.reqres.in) i am using just to have dummy data.\n\n## Custom Pipe: [Guide For Pipe](https://angular.io/guide/pipes)\n\nPipes 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.\n\n\u003cbr\u003e\n\n## Design System - Angular Material\n\n**Angular Material Module** UI component infrastructure and Material Design components for mobile and desktop Angular web applications.\n\u003cbr\u003e\nFor High **Quality**, **Versatile**, **Frictionless** and speedy implementions of building UI for your angular app.\n\n## Development server\n\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n\n## Build\n\nRun `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.\n\n## Running unit tests\n\nRun `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).\n\n## Running end-to-end tests\n\nRun `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).\n\n## Further help\n\nTo get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsounishnath003%2Fredux-pattern-angular-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsounishnath003%2Fredux-pattern-angular-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsounishnath003%2Fredux-pattern-angular-app/lists"}