{"id":16610989,"url":"https://github.com/pkief/angular-reactive-state","last_synced_at":"2026-05-19T05:39:08.676Z","repository":{"id":65416557,"uuid":"571258273","full_name":"PKief/angular-reactive-state","owner":"PKief","description":"Reactive state management for Angular","archived":false,"fork":false,"pushed_at":"2024-02-12T14:23:36.000Z","size":6088,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-21T05:34:02.410Z","etag":null,"topics":["angular","angular-state","angular-state-management","angular-store","reactive-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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PKief.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","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-11-27T17:02:41.000Z","updated_at":"2023-02-05T19:04:38.000Z","dependencies_parsed_at":"2025-01-17T14:35:22.944Z","dependency_job_id":"04f49d8a-7435-4682-8759-5f7b79e7e255","html_url":"https://github.com/PKief/angular-reactive-state","commit_stats":{"total_commits":63,"total_committers":2,"mean_commits":31.5,"dds":0.1428571428571429,"last_synced_commit":"43ed6e30ce07ea8fc1317d94c833fd87553aa19e"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PKief%2Fangular-reactive-state","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PKief%2Fangular-reactive-state/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PKief%2Fangular-reactive-state/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PKief%2Fangular-reactive-state/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PKief","download_url":"https://codeload.github.com/PKief/angular-reactive-state/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242901080,"owners_count":20203887,"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","angular-state","angular-state-management","angular-store","reactive-state-management"],"created_at":"2024-10-12T01:34:16.563Z","updated_at":"2025-10-13T18:35:59.423Z","avatar_url":"https://github.com/PKief.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003cbr\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/PKief/angular-reactive-state/main/logo.png\" alt=\"logo\" width=\"200\"\u003e\n  \u003cbr\u003e\u003cbr\u003e\n  Angular Reactive State\n  \u003cbr\u003e\n  \u003cbr\u003e\n\u003c/h1\u003e\n\n\u003ch4 align=\"center\"\u003eReactive state management for Angular\u003c/h4\u003e\n\n## Advantages\n\n- Provide a store for each Angular module\n- Flexible and customizable store services\n- Supports Redux Dev Tool Extensions\n\n## Getting started\n\n### Installation\n\nNPM\n\n```\nnpm i angular-reactive-state\n```\n\nYarn\n\n```\nyarn add angular-reactive-state\n```\n\n### Create a store\n\nAs we are following a decentralized store concept we create a separate store for each of our modules:\n\nRun the following command to create a store service:\n\n```\nng generate service \u003cstore-name\u003e\n```\n\nNow we follow these steps to transform the generated into a reactive store:\n\n- the service class extends the `Store` class\n- the `Store` class wants the type information of how our state looks like\n- the `super` function adds a name for the store and the initial state\n\n#### Example\n\n```ts\n// todo-store.service.ts\nimport { Injectable } from '@angular/core';\nimport { Store } from 'angular-reactive-state';\n\ntype TodoStoreState = {\n  todos: string[];\n};\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class TodoStoreService extends Store\u003cTodoStoreState\u003e {\n  constructor() {\n    super('TodoStore', {\n      todos: [],\n    });\n  }\n}\n```\n\n### Subscribe the state\n\nThe UI components can inject the store service like this:\n\n```ts\nconstructor(private todoStore: TodoStoreService) {}\n```\n\nTo subscribe to the state of the todoStore there are different possbilities:\n\n- subscribe to the whole state at once\n- subscribe to a specific part of the state\n\n#### Example\n\n```ts\n// subscribe to the whole state at once\nthis.todoStore.state$.subscribe(state =\u003e {\n  console.log(state); // output: { todos: [] }\n});\n\n// subscribe to a specific part of the state\nthis.todoStore\n  .select(state =\u003e state.todos)\n  .subscribe(todos =\u003e {\n    console.log(todos); // output: []\n  });\n```\n\nThe `select` method will only trigger an event if the value of the specific property of the state has been changed. In addition the returned values are deep copies of the values in the store, so it is can't cause any reference issues.\n\n### Usage with signals\n\nSince Angular 17, [Signals](https://angular.io/guide/signals#angular-signals) can be used instead of Observables. To achieve this, the function `selectAsSignal` can be used:\n\n```ts\n// get a signal of a specific part of the state\nconst myTodos = this.todoStore.selectAsSignal(state =\u003e state.todos);\n```\n\n### Get state snapshot\n\nSome operations only require the current state of the store and do not need to get notified about changes. These are cases where a snapshot of the latest state can be very helpful.\n\n#### Example\n\n```ts\n// get a part of the state without subscribing to it\nconsole.log(this.todoStore.snapshot.todos); // output: ['my todo']\n```\n\n### Change the state\n\nThere are two possibilities to update the state in the store:\n\n- update a root-level property of the state\n- update the whole state at once\n\n#### Example\n\n```ts\n// replace a root-level property of the state with a new value\nthis.todoStore.updateProperty('todos', ['my first todo'], 'add todo');\n\n// update the whole state at once\nthis.todoStore.update(\n  state =\u003e ({\n    ...state,\n    todos: [...state.todos, 'my first todo'],\n  }),\n  'add todo'\n);\n```\n\nIn combination with the `snapshot` functionality it would also be possible to update the state like this:\n\n```ts\n// manipulate the store by using latest values from snapshot\nthis.todoStore.updateProperty('todos', [\n  ...this.todoStore.snapshot.todos,\n  'new todo',\n]);\n```\n\n### Destroy Store\n\nWhen a store service is not needed anymore it can be destroyed by calling the `destroy` method. This method ensures that no state changes are triggered to the subscribers of the store.\n\n```ts\n// store is not triggering events\nthis.todoStore.destroy();\n```\n\n### Usage of Redux Devtools\n\nTo use the dev tools it is necessary to import the dev tools module:\n\n```ts\nimport { StateDevToolsModule } from 'angular-reactive-state/dev-tools';\n\n@Component({\n  ...\n  imports: [StateDevToolsModule],\n  standalone: true,\n})\nexport class AppComponent { ... }\n```\n\nor when there's a module\n\n```ts\nimport { StateDevToolsModule } from 'angular-reactive-state/dev-tools';\n\n@NgModule({\n  imports: [StateDevToolsModule],\n})\nexport class AppModule {}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpkief%2Fangular-reactive-state","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpkief%2Fangular-reactive-state","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpkief%2Fangular-reactive-state/lists"}