{"id":34583569,"url":"https://github.com/piyalidas10/angular19-ngrx-projects","last_synced_at":"2026-04-15T12:33:32.367Z","repository":{"id":315911599,"uuid":"1061226247","full_name":"piyalidas10/angular19-ngrx-projects","owner":"piyalidas10","description":"Angular 19 : NGRX projects","archived":false,"fork":false,"pushed_at":"2025-10-11T13:26:34.000Z","size":15968,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-12-25T21:58:52.120Z","etag":null,"topics":["angular","ngrx","redux","signal","store"],"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/piyalidas10.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-21T13:55:45.000Z","updated_at":"2025-12-02T20:41:04.000Z","dependencies_parsed_at":"2025-09-21T16:14:27.617Z","dependency_job_id":"8c6814a2-34d4-4486-a777-ccc579084cc5","html_url":"https://github.com/piyalidas10/angular19-ngrx-projects","commit_stats":null,"previous_names":["piyalidas10/angular19-ngrx-projects"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/piyalidas10/angular19-ngrx-projects","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2Fangular19-ngrx-projects","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2Fangular19-ngrx-projects/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2Fangular19-ngrx-projects/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2Fangular19-ngrx-projects/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/piyalidas10","download_url":"https://codeload.github.com/piyalidas10/angular19-ngrx-projects/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2Fangular19-ngrx-projects/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31842179,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T11:29:19.690Z","status":"ssl_error","status_checked_at":"2026-04-15T11:29:19.171Z","response_time":63,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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","ngrx","redux","signal","store"],"created_at":"2025-12-24T10:26:21.629Z","updated_at":"2026-04-15T12:33:32.328Z","avatar_url":"https://github.com/piyalidas10.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular 19 : NGRX\nChrome Extension : Redux DevTools \u0026 Angular DevTools\n\nStore : The store holds the application state. It is immutable, which means it cannot get changed directly. We do not change the state. We use reducers instead. That will process actions that change the state. But we do not change the state directly. That's very, very important because in Nrw we use a one way data flow.\n\nActions : Those are events that modify the state inside of the store.\n\nReducers : Functions that take those actions and modify the state based on the action type. Basically means that reducers are processing the actions and an action. For example, could be add something to the cart or remove something from the cart, process the checkout load, some products from the database, successfully loaded, products from the database or I received a failure while loading products from the database. All of those could be actions which are getting processed by a reducer.\n\nEffects : Handle asynchronous operations(like fetching data from a server) and then trigger new actions like (I have successfully loaded products from the server / I faced a failure or an error while I tried loading).\n\n## NGRX use one way data flow\n\nActions -\u003e Reducers -\u003e Update states -\u003e Selectors share updates\n\n1. Actions are getting processed by reducers as a reducer.\n2. As a result, Reducers update the state and then the components are receiving those updates on the state. So the data that got changed by the selectors they are subscribed to. \n3. The updated state is automatically passed to the components via selectors. the components are subscribed to the selectors they are interested in. So let's say we have a component that displays products. Then we would subscribe this component to a selector which shares the information of all the products.\n\nSo as you can see, this is one way just goes from the left to the right. It goes from actions reducers, update state to the selectors.\n\n\n## Now let's assume that we want to show products inside of that component.\n![ngrx](img/state-management-lifecycle.png)\n\n1. So we would dispatch an action. It could be load all products.\n2. Therefore we would start an effect right here. And that effect would call the service to load all the products and as a result, then start a new action\n3. And that effect would call the service to load all the products and as a result, then start a new action which is like I have successfully loaded all the products.\n4. Those actions will then get processed by the reducer. Usually you want to create one reducer per entity. So if we would have users, for example, so for authorization and we would have our products, then you would usually have one reducer for the authorization and you would have one reducer for the products.\n5. Once the reducer processed the action, the state inside of the store got changed. \n6. the changes are shared via the selectors. And if a component is interested in a specific change, it will subscribe to the well related selector.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpiyalidas10%2Fangular19-ngrx-projects","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpiyalidas10%2Fangular19-ngrx-projects","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpiyalidas10%2Fangular19-ngrx-projects/lists"}