{"id":13475825,"url":"https://github.com/ngrx/store","last_synced_at":"2025-12-30T17:10:11.164Z","repository":{"id":53764414,"uuid":"47903333","full_name":"ngrx/store","owner":"ngrx","description":"RxJS powered state management for Angular applications, inspired by Redux","archived":true,"fork":false,"pushed_at":"2017-11-27T12:55:33.000Z","size":183,"stargazers_count":3908,"open_issues_count":10,"forks_count":316,"subscribers_count":201,"default_branch":"master","last_synced_at":"2024-05-02T19:24:03.479Z","etag":null,"topics":["angular","ngrx","redux","rxjs"],"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/ngrx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-12-13T02:44:59.000Z","updated_at":"2024-04-30T12:38:26.000Z","dependencies_parsed_at":"2022-08-30T15:53:15.688Z","dependency_job_id":null,"html_url":"https://github.com/ngrx/store","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngrx%2Fstore","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngrx%2Fstore/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngrx%2Fstore/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngrx%2Fstore/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ngrx","download_url":"https://codeload.github.com/ngrx/store/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234707370,"owners_count":18874671,"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","ngrx","redux","rxjs"],"created_at":"2024-07-31T16:01:23.893Z","updated_at":"2025-09-30T05:31:13.335Z","avatar_url":"https://github.com/ngrx.png","language":"TypeScript","readme":"---\n# This repository is for version 2.x of @ngrx/store.\n# [Click here for the latest version (4.x)](https://github.com/ngrx/platform)\n---\n\n## @ngrx/store\nRxJS powered state management for Angular applications, inspired by Redux\n\n[![Join the chat at https://gitter.im/ngrx/store](https://badges.gitter.im/ngrx/store.svg)](https://gitter.im/ngrx/store?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n[![CircleCI Status for ngrx/store](https://circleci.com/gh/ngrx/store.svg?style=shield\u0026circle-token=aea1fc73de3419cd926fc95e627e036113646fd8\n)](https://circleci.com/gh/ngrx/store)\n[![npm version](https://badge.fury.io/js/%40ngrx%2Fstore.svg)](https://www.npmjs.com/package/@ngrx/store)\n\n@ngrx/store is a controlled state container designed to help write performant, consistent applications\non top of Angular. Core tenets:\n- State is a single immutable data structure\n- Actions describe state changes\n- Pure functions called reducers take the previous state and the next action to compute the new state\n- State accessed with the `Store`, an observable of state and an observer of actions\n\nThese core principles enable building components that can use the `OnPush` change detection strategy\ngiving you [intelligent, performant change detection](http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html#smarter-change-detection)\nthroughout your application.\n\n\n### Installation\nInstall @ngrx/core and @ngrx/store from npm:\n```bash\nnpm install @ngrx/core @ngrx/store@2.2.3 --save\n```\n\nOptional packages:\n- [@ngrx/store-devtools](https://github.com/ngrx/store-devtools) instruments your store letting you use a\n[powerful time-travelling debugger](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en).\n- [@ngrx/router-store](https://github.com/ngrx/router-store) keeps the state of @angular/router in your store\n- [@ngrx/effects](https://github.com/ngrx/effects) isolates side effects from your UI by expressing side effects as sources of actions\n\n\n### Examples\n- [Official @ngrx/example-app](https://github.com/ngrx/example-app) is an officially maintained example application showcasing best practices\nfor @ngrx projects, including @ngrx/store and @ngrx/effects\n- [angular-webpack2-starter](https://github.com/qdouble/angular-webpack2-starter) is a complete Webpack 2 starter with built-in support for @ngrx.\nIncludes Ahead-of-Time (AOT) compilation, hot module reloading (HMR), devtools, and server-side rendering.\n\n\n### Introduction\n- [Reactive Angular 2 with ngrx (video)](https://youtu.be/mhA7zZ23Odw)\n- [Comprehensive Introduction to @ngrx/store](https://gist.github.com/btroncone/a6e4347326749f938510)\n- [@ngrx/store in 10 minutes (video)](https://egghead.io/lessons/angular-2-ngrx-store-in-10-minutes)\n- [Build Redux Style Applications with Angular2, RxJS, and ngrx/store (video)](https://egghead.io/courses/building-a-time-machine-with-angular-2-and-rxjs)\n\n\n### Setup\nCreate a reducer function for each data type you have in your application. The combination of these reducers will\nmake up your application state:\n\n```ts\n// counter.ts\nimport { ActionReducer, Action } from '@ngrx/store';\n\nexport const INCREMENT = 'INCREMENT';\nexport const DECREMENT = 'DECREMENT';\nexport const RESET = 'RESET';\n\nexport function counterReducer(state: number = 0, action: Action) {\n\tswitch (action.type) {\n\t\tcase INCREMENT:\n\t\t\treturn state + 1;\n\n\t\tcase DECREMENT:\n\t\t\treturn state - 1;\n\n\t\tcase RESET:\n\t\t\treturn 0;\n\n\t\tdefault:\n\t\t\treturn state;\n\t}\n}\n```\n\nIn your app's main module, import those reducers and use the `StoreModule.provideStore(reducers)`\nfunction to provide them to Angular's injector:\n\n```ts\nimport { NgModule } from '@angular/core'\nimport { StoreModule } from '@ngrx/store';\nimport { counterReducer } from './counter';\n\n@NgModule({\n  imports: [\n    BrowserModule,\n    StoreModule.provideStore({ counter: counterReducer })\n  ]\n})\nexport class AppModule {}\n```\n\n\nYou can then inject the `Store` service into your components and services. Use `store.select` to\n_select_ slice(s) of state:\n\n```ts\nimport { Store } from '@ngrx/store';\nimport { INCREMENT, DECREMENT, RESET } from './counter';\n\ninterface AppState {\n  counter: number;\n}\n\n@Component({\n\tselector: 'my-app',\n\ttemplate: `\n\t\t\u003cbutton (click)=\"increment()\"\u003eIncrement\u003c/button\u003e\n\t\t\u003cdiv\u003eCurrent Count: {{ counter | async }}\u003c/div\u003e\n\t\t\u003cbutton (click)=\"decrement()\"\u003eDecrement\u003c/button\u003e\n\n\t\t\u003cbutton (click)=\"reset()\"\u003eReset Counter\u003c/button\u003e\n\t`\n})\nclass MyAppComponent {\n\tcounter: Observable\u003cnumber\u003e;\n\n\tconstructor(private store: Store\u003cAppState\u003e){\n\t\tthis.counter = store.select('counter');\n\t}\n\n\tincrement(){\n\t\tthis.store.dispatch({ type: INCREMENT });\n\t}\n\n\tdecrement(){\n\t\tthis.store.dispatch({ type: DECREMENT });\n\t}\n\n\treset(){\n\t\tthis.store.dispatch({ type: RESET });\n\t}\n}\n```\n\n\n## Contributing\nPlease read [contributing guidelines here](https://github.com/ngrx/store/blob/master/CONTRIBUTING.md).\n","funding_links":[],"categories":["TypeScript","Uncategorized","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)","Libraries Built with RxJS"],"sub_categories":["Uncategorized","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngrx%2Fstore","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fngrx%2Fstore","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngrx%2Fstore/lists"}