RxJS powered state management for Angular applications, inspired by Redux
@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
throughout your application.
Install @ngrx/core and @ngrx/store from npm:
npm install @ngrx/core @ngrx/store --save
Optional packages:
- @ngrx/store-devtools instruments your store letting you use a powerful time-travelling debugger.
- @ngrx/router-store keeps the state of @angular/router in your store
- @ngrx/effects isolates side effects from your UI by expressing side effects as sources of actions
- Official @ngrx/example-app is an officially maintained example application showcasing best practices for @ngrx projects, including @ngrx/store and @ngrx/effects
- 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.
- Reactive Angular 2 with ngrx (video)
- Comprehensive Introduction to @ngrx/store
- @ngrx/store in 10 minutes (video)
- Build Redux Style Applications with Angular2, RxJS, and ngrx/store (video)
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 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:
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:
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>
<button (click)="reset()">Reset Counter</button>
`
})
class MyAppComponent {
counter: Observable<number>;
constructor(private 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 });
}
}
Using typed actions in conjunction with switchReduce
allow you to write reducers in a more type safety way.
// counter.ts
import { ActionReducer, TypedAction, switchReduce } from '@ngrx/store';
export class AddAction implements TypedAction<number> {
readonly type = 'ADD';
constructor(public readonly payload: number) {}
}
export class SubtractAction implements TypedAction<number> {
readonly type = 'SUBTRACT';
constructor(public readonly payload: number) {}
}
export class ResetAction implements TypedAction<any> {
readonly type = 'RESET';
readonly payload: any;
constructor() {}
}
export const counterReducer: ActionReducer<number> =
(state: number = 0, action: TypedAction<any>) =>
switchReduce(state, action)
.byClass(AddAction, (num: number) => {
return state + num;
})
.byClass(SubtractAction, (num: number) => {
return state - num;
})
.byClass(ResetAction, () => {
return 0;
})
.reduce();
Please read contributing guidelines here.