Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ngrx/store
RxJS powered state management for Angular applications, inspired by Redux
https://github.com/ngrx/store
angular ngrx redux rxjs
Last synced: 4 months ago
JSON representation
RxJS powered state management for Angular applications, inspired by Redux
- Host: GitHub
- URL: https://github.com/ngrx/store
- Owner: ngrx
- License: mit
- Archived: true
- Created: 2015-12-13T02:44:59.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-11-27T12:55:33.000Z (about 7 years ago)
- Last Synced: 2024-05-02T19:24:03.479Z (8 months ago)
- Topics: angular, ngrx, redux, rxjs
- Language: TypeScript
- Homepage:
- Size: 179 KB
- Stars: 3,908
- Watchers: 201
- Forks: 316
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular-components - @ngrx/store - RxJS powered state management for Angular applications, inspired by Redux. (Uncategorized / Uncategorized)
- awesome-angular-components - @ngrx/store - RxJS powered state management for Angular applications, inspired by Redux. (Uncategorized / Uncategorized)
README
---
# This repository is for version 2.x of @ngrx/store.
# [Click here for the latest version (4.x)](https://github.com/ngrx/platform)
---
## @ngrx/store
RxJS powered state management for Angular applications, inspired by Redux
[](https://gitter.im/ngrx/store?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[](https://circleci.com/gh/ngrx/store)
[](https://www.npmjs.com/package/@ngrx/store)
@ngrx/store is a controlled state container designed to help write performant, consistent applications
on top of Angular. Core tenets:
- State is a single immutable data structure
- Actions describe state changes
- Pure functions called reducers take the previous state and the next action to compute the new state
- State accessed with the `Store`, an observable of state and an observer of actions
These core principles enable building components that can use the `OnPush` change detection strategy
giving you [intelligent, performant change detection](http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html#smarter-change-detection)
throughout your application.
### Installation
Install @ngrx/core and @ngrx/store from npm:
```bash
npm install @ngrx/core @ngrx/[email protected] --save
```
Optional packages:
- [@ngrx/store-devtools](https://github.com/ngrx/store-devtools) instruments your store letting you use a
[powerful time-travelling debugger](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en).
- [@ngrx/router-store](https://github.com/ngrx/router-store) keeps the state of @angular/router in your store
- [@ngrx/effects](https://github.com/ngrx/effects) isolates side effects from your UI by expressing side effects as sources of actions
### Examples
- [Official @ngrx/example-app](https://github.com/ngrx/example-app) is an officially maintained example application showcasing best practices
for @ngrx projects, including @ngrx/store and @ngrx/effects
- [angular-webpack2-starter](https://github.com/qdouble/angular-webpack2-starter) is a complete Webpack 2 starter with built-in support for @ngrx.
Includes Ahead-of-Time (AOT) compilation, hot module reloading (HMR), devtools, and server-side rendering.
### Introduction
- [Reactive Angular 2 with ngrx (video)](https://youtu.be/mhA7zZ23Odw)
- [Comprehensive Introduction to @ngrx/store](https://gist.github.com/btroncone/a6e4347326749f938510)
- [@ngrx/store in 10 minutes (video)](https://egghead.io/lessons/angular-2-ngrx-store-in-10-minutes)
- [Build Redux Style Applications with Angular2, RxJS, and ngrx/store (video)](https://egghead.io/courses/building-a-time-machine-with-angular-2-and-rxjs)
### Setup
Create a reducer function for each data type you have in your application. The combination of these reducers will
make up your application state:
```ts
// counter.ts
import { ActionReducer, Action } from '@ngrx/store';
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
export const RESET = 'RESET';
export function counterReducer(state: number = 0, action: Action) {
switch (action.type) {
case INCREMENT:
return state + 1;
case DECREMENT:
return state - 1;
case RESET:
return 0;
default:
return state;
}
}
```
In your app's main module, import those reducers and use the `StoreModule.provideStore(reducers)`
function to provide them to Angular's injector:
```ts
import { NgModule } from '@angular/core'
import { StoreModule } from '@ngrx/store';
import { counterReducer } from './counter';
@NgModule({
imports: [
BrowserModule,
StoreModule.provideStore({ counter: counterReducer })
]
})
export class AppModule {}
```
You can then inject the `Store` service into your components and services. Use `store.select` to
_select_ slice(s) of state:
```ts
import { Store } from '@ngrx/store';
import { INCREMENT, DECREMENT, RESET } from './counter';
interface AppState {
counter: number;
}
@Component({
selector: 'my-app',
template: `
Increment
Current Count: {{ counter | async }}
Decrement
Reset Counter
`
})
class MyAppComponent {
counter: Observable;
constructor(private store: Store){
this.counter = store.select('counter');
}
increment(){
this.store.dispatch({ type: INCREMENT });
}
decrement(){
this.store.dispatch({ type: DECREMENT });
}
reset(){
this.store.dispatch({ type: RESET });
}
}
```
## Contributing
Please read [contributing guidelines here](https://github.com/ngrx/store/blob/master/CONTRIBUTING.md).