{"id":26169972,"url":"https://github.com/smoosee/ngrx-manager","last_synced_at":"2026-01-14T12:55:05.437Z","repository":{"id":175469568,"uuid":"653942348","full_name":"smoosee/ngrx-manager","owner":"smoosee","description":null,"archived":false,"fork":false,"pushed_at":"2025-06-06T15:03:02.000Z","size":4159,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-10T14:37:59.173Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/smoosee.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","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},"funding":{"github":["sheriffMoose"]}},"created_at":"2023-06-15T04:29:35.000Z","updated_at":"2025-07-24T14:37:07.000Z","dependencies_parsed_at":"2023-06-28T14:30:56.983Z","dependency_job_id":"9794d5db-d18b-4fcc-a1ee-1df21ade08b8","html_url":"https://github.com/smoosee/ngrx-manager","commit_stats":null,"previous_names":["smoosee/ngrx-manager"],"tags_count":21,"template":false,"template_full_name":null,"purl":"pkg:github/smoosee/ngrx-manager","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smoosee%2Fngrx-manager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smoosee%2Fngrx-manager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smoosee%2Fngrx-manager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smoosee%2Fngrx-manager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/smoosee","download_url":"https://codeload.github.com/smoosee/ngrx-manager/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smoosee%2Fngrx-manager/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28420814,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-14T10:47:48.104Z","status":"ssl_error","status_checked_at":"2026-01-14T10:46:19.031Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":[],"created_at":"2025-03-11T19:01:13.648Z","updated_at":"2026-01-14T12:55:05.432Z","avatar_url":"https://github.com/smoosee.png","language":"TypeScript","funding_links":["https://github.com/sponsors/sheriffMoose"],"categories":["State Management"],"sub_categories":["NgRx"],"readme":"\u003cdiv align=\"center\"\u003e\n\n\u003ch1\u003e @smoosee/ngrx-manager \u003c/h1\u003e\n\u003cp\u003ePlug-N-Play State Manager for NGRX stores\u003c/p\u003e\n\n[![][img.release]][link.release]\n[![][img.license]][link.license]\n\n![][img.node]\n![][img.npm]\n![][img.downloads]\n\n[![][img.banner]][link.npm]\n\n\u003c/div\u003e\n\n## Features\n\n- ⚡️ Simple plug-n-play.\n- 🅰️ Supports latest Angular v16.\n- 😎 Action Based Processing.\n- 💪 Strongly Typed States.\n- 📦 Save into Local \u0026 Session Storage.\n- 📃 Comprehensive APIs.\n- 🔁 Backward Compatibility with RxJs Observables.\n\n\u003ch2\u003eTable of Contents\u003c/h2\u003e\n\n- [Install](#install)\n- [Usage](#usage)\n  - [Exported Configuration Types](#exported-configuration-types)\n    - [StoreOptions](#storeoptions)\n    - [StoreState](#StoreState)\n    - [StoreAction](#StoreAction)\n    - [StateReducer](#statereducer)\n  - [Setup The Store](#setup-the-store)\n    - [forRoot](#forroot)\n    - [forChild](#forchild)\n  - [Dispatching Actions](#dispatching-actions)\n  - [Listening To State Changes](#listening-to-state-changes)\n  - [Strongly Typed States](#strongly-typed-states)\n\n## Install\n\n```shell\nyarn add @smoosee/ngrx-manager\n\n# OR\n\nnpm install @smoosee/ngrx-manager\n```\n\n## Usage\n\n### Exported Configuration Types\n\n#### StoreOptions\n\n| key       | type     | default  | constraint | description                                                                                                                              |\n| --------- | -------- | -------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------- |\n| `app`     | `string` | `null`   | Optional   | a name that is used to group states.                                                                                                     |\n| `prefix`  | `string` | `null`   | Optional   | a prefix that is used to group apps.                                                                                                     |\n| `storage` | `string` | `\"none\"` | Optional   | optional value of `session`, `local` or `none` that determines if we will use `sessionStorage` or `localStorage` to hold the store data. |\n\n#### StoreState\n\n| key          | type             | default | constraint | description                                                 |\n| ------------ | ---------------- | ------- | ---------- | ----------------------------------------------------------- |\n| `name`       | `string`         | `null`  | Required   | a name that identifies the state.                           |\n| `initial`    | `object`         | `{}`    | Optional   | initial value of the state.                                 |\n| `actions`    | `StoreAction[]`  | `[]`    | Optional   | list of actions that will be executed against the state.    |\n| `options`    | `StoreOptions`   | `{}`    | Optional   | override global `StoreOptions`.                             |\n| `reducers`   | `StateReducer[]` | `[]`    | Optional   | list of reducers that will be used to map the state data.   |\n\n#### StoreAction\n\n| key       | type     | default | constraint | description                                               |\n| --------- | -------- | ------- | ---------- | --------------------------------------------------------- |\n| `name`    | `string` | `null`  | Required   | a name that identifies the action.                        |\n| `service` | `any`    | `null`  | Required   | the service class that will be injected for this action.  |\n| `method`  | `string` | `null`  | Required   | the method name that will be called inside the `service`. |\n\n#### StateReducer\n\n| key         | type                                                                           | default | constraint | description                                                     |\n| ----------- | ------------------------------------------------------------------------------ | ------- | ---------- | --------------------------------------------------------------- |\n| `mapReduce` | (`state`: `StoreState`, `value`: `any`, `action?`: `ExtendedAction`) =\u003e `any` | `null`  | Required   | the reducer function that will be called to map the state data. |\n\n### Setup The Store\n\nYou can setup the store using multiple methods available thru different exported items depending on your needs.\n\n#### forRoot\n\n- This method is used to setup the Store globally.\n- This is helpful if you have a single entry application.\n- In case if you have module-federation setup, jump to `forChild`.\n\n```typescript\n// app.module.ts\nimport { NgModule } from \"@angular/core\";\nimport { BrowserModule } from \"@angular/platform-browser\";\nimport { StoreModule } from \"@smoosee/ngrx-manager\";\n\nimport { AppComponent } from \"./app.component\";\n\nimport { StoreOptions, StatesConfigs } from \"./app.store\";\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [BrowserModule, StoreModule.forRoot(StoreOptions, StatesConfigs)],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\n#### forChild\n\n- This method is used to setup feature States.\n- This is typically helpful if you have module-federation or modules with different states that you need to setup separately.\n\n```typescript\n// app.module.ts\nimport { NgModule } from \"@angular/core\";\nimport { StoreModule } from \"@smoosee/ngrx-manager\";\n\nimport { PageComponent } from \"./page.component\";\n\nimport { StoreOptions, StatesConfigs } from \"./page.store\";\n\n@NgModule({\n  declarations: [PageComponent],\n  imports: [StoreModule.forChild(StatesConfigs, StoreOptions)],\n})\nexport class PageModule {}\n```\n\n\n### Dispatching Actions\n\nTo communicate with the Store, you have to use the `StoreFacade` service.\n\n```typescript\n    // inject the `StoreFacade` service by using it in the constructor\n    constructor(private storeFacade: StoreFacade) {}\n    // OR\n    storeFacade = inject(StoreFacade);\n\n\n    // dispatch action to the store\n    // will trigger the `increment` action\n    // for the `Test` state\n    this.storeFacade.dispatch(\"Test\", \"increment\");\n\n    // dispatch action to the store\n    // will trigger the `SET` action\n    // for the `App` state\n    this.storeFacade.set(\"App\", { name: \"smoosee\" });\n\n    // dispatch action to the store\n    // will trigger the `EXTEND` action\n    // for the `App` state\n    // which is basically extending the current state\n    // with the new data instead of replacing it like the `SET` action\n    this.storeFacade.extend(\"App\", { name: \"smoosee\" });\n\n    // dispatch action to the store\n    // will trigger the `UNSET` action\n    // for the `App` state\n    this.storeFacade.unset(\"App\");\n\n    // clear all data from the store\n    // this will trigger the `UNSET` action\n    // for all states\n    this.storeFacade.clear();\n```\n\n### Listening To State Changes\n\nTo listen to state changes, you have to use the `StoreFacade` service.\n\n```typescript\n// app.component.ts\nimport { Component, OnInit } from \"@angular/core\";\nimport { StoreFacade } from \"@smoosee/ngrx-manager\";\n\n@Component({\n  selector: \"app-root\",\n  template: `\n    \u003cdiv\u003evalue: {{ stateValue | json }}\u003c/div\u003e\n    \u003cdiv\u003eobservable: {{ sateObservable | async | json }}\u003c/div\u003e\n    \u003cdiv\u003esignal: {{ stateSignal() | json }}\u003c/div\u003e\n  `,\n})\nexport class AppComponent implements OnInit {\n  // retrieve value of the state synchronously\n  stateValue = this.facade.select(\"App\");\n  // retrieve value of the state asynchronously as Observable\n  stateObservable = this.facade.select(\"App\", true);\n  // retrieve value of the state asynchronously as Signal\n  stateSignal = this.facade.select(\"App\", false);\n\n  constructor(private facade: StoreFacade) {}\n\n  ngOnInit() {}\n}\n```\n\n### Strongly Typed States\n\nTo achieve Strongly Typed States, you would need to do the following\n\n```typescript\n// STEP 1\n// create interfaces or classes of the states models.\n\ninterface AppState {\n    set: boolean;\n    extend: boolean;\n}\n\ninterface SharedState {\n    useThis: boolean;\n    useThat: boolean;\n}\n\n// STEP 2\n// generate the store state configs using the StoreState, StoreAction classes.\n// Also use the state interfaces created in STEP 1 with the `initial` property\n\nexport const AppStoreStates = [\n    new StoreState({\n        name: 'App',\n        initial: \u003cAppState\u003e{},\n        actions: [\n            new StoreAction({\n                name: 'APP_TEST_1',\n                service: AppService,\n                method: 'testFn',\n            }),\n            new StoreAction({\n                service: AppService,\n                name: 'APP_TEST_2',\n                method: 'testFn2',\n            })\n        ]\n    }),\n    new StoreState({\n        name: 'Shared',\n        initial: \u003cSharedState\u003e{},\n        actions: [\n            new StoreAction({\n                name: 'Shared_TEST_1',\n                service: AppService,\n                method: 'testFn2',\n            })\n        ]\n    })\n];\n\n// STEP 3\n// use `StoreFacade\u003ctypeof AppStoreStates\u003e`.\n@Injectable({ provided: \"root\" })\nexport class AppFacade extends StoreFacade\u003ctypeof AppStoreStates\u003e {\n  constructor() {\n    super();\n  }\n}\n```\n\nYou will then be able to use state names and action names when dispatching or selecting from the store.\n\n## License\n\nMIT License\n\nCopyright (c) 2023 Mostafa Sherif\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\n[img.release]: https://img.shields.io/github/actions/workflow/status/smoosee/ngrx-manager/release.yml?logo=github\u0026label=release\n[img.license]: https://img.shields.io/github/license/smoosee/ngrx-manager?logo=github\n[img.node]: https://img.shields.io/node/v/@smoosee/ngrx-manager?logo=node.js\u0026logoColor=white\u0026labelColor=339933\u0026color=grey\u0026label=\n[img.npm]: https://img.shields.io/npm/v/@smoosee/ngrx-manager?logo=npm\u0026logoColor=white\u0026labelColor=CB3837\u0026color=grey\u0026label=\n[img.downloads]: https://img.shields.io/npm/dt/@smoosee/ngrx-manager?logo=docusign\u0026logoColor=white\u0026labelColor=purple\u0026color=grey\u0026label=\n[img.banner]: https://nodei.co/npm/@smoosee/ngrx-manager.png\n[link.release]: https://github.com/smoosee/ngrx-manager/actions/workflows/release.yml\n[link.license]: https://github.com/smoosee/ngrx-manager/blob/master/LICENSE\n[link.npm]: https://npmjs.org/package/@smoosee/ngrx-manager\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmoosee%2Fngrx-manager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmoosee%2Fngrx-manager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmoosee%2Fngrx-manager/lists"}