RxJS powered state management inspired by Redux for Angular 2 apps
http://plnkr.co/edit/Hb4pJP3jGtOp6b7JubzS?p=preview
https://github.com/ngrx/example-app
- Comprehensive Introduction to @ngrx/store
- Reactive Angular 2 with ngrx (video)
- @ngrx/store in 10 minutes (video)
Make sure you have @angular/core and @ngrx/core installed via npm:
npm install @angular/core @ngrx/core --save
Install @ngrx/store from npm:
npm install @ngrx/store --save
Set up with Angular-CLI and SystemJS. Modify system-config.ts:
/** Map relative paths to URLs. */
const map: any = {
'@ngrx': 'vendor/@ngrx'
};
/** User packages configuration. */
const packages: any = {
'@ngrx/core': {
main: 'index.js',
format: 'cjs'
},
'@ngrx/store': {
main: 'index.js',
format: 'cjs'
}
};
Modify angular-cli-build.js by adding this line to vendorNpmFiles:
'@ngrx/**/*.+(js|js.map)'
Create a reducer function for each data type you have in your application. The combination of these reducers will make up your application state:
// counter.ts
import { ActionReducer, Action } from '@ngrx/store';
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
export const RESET = 'RESET';
export const counterReducer: ActionReducer<number> = (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, initialState)
function to provide them to Angular's injector:
import { Store, StoreModule } from '@ngrx/store';
import { counterReducer } from './counter';
import { NgModule } from '@angular/core'
@NgModule({
imports: [
BrowserModule,
StoreModule.provideStore({ counter: counterReducer }, { counter: 0 })
]
})
export class MyAppModule {}
You can then inject the Store
service into your components and services. The store.select
method can be used to obtain the appropriate slice(s) of state from your application store:
import { Store } from '@ngrx/store';
import { INCREMENT, DECREMENT, RESET } from './counter';
interface AppState {
counter: number;
}
@Component({
selector: 'my-app',
template: `
<button (click)="increment()">Increment</button>
<div>Current Count: {{ counter | async }}</div>
<button (click)="decrement()">Decrement</button>
`
})
class MyApp {
counter: Observable<number>;
constructor(public store: Store<AppState>){
this.counter = store.select('counter');
}
increment(){
this.store.dispatch({ type: INCREMENT });
}
decrement(){
this.store.dispatch({ type: DECREMENT });
}
reset(){
this.store.dispatch({ type: RESET });
}
}
The middleware APIs have been removed. There are no plans to reintroduce these APIs and there is not a straightforward upgrade process if you rely on middleware.
Some popular middleware libraries have already been upgraded. If you were using store-saga, checkout @ngrx/effects. If you were using ngrx-store-logger, it has been reimplemented as a meta reducer.
The APIs for synchronously pulling the most recent state value out of Store have been removed. Instead, you can always rely on subscribe()
running synchronously if you have to get the state value:
import 'rxjs/add/operator/take';
function getState(store: Store<State>): State {
let state: State;
store.take(1).subscribe(s => state = s);
return state;
}
Please read contributing guidelines here.