@ngrx/store

RxJS powered state management inspired by Redux for Angular 2 apps

Demo

http://plnkr.co/edit/Hb4pJP3jGtOp6b7JubzS?p=preview

Example Application

https://github.com/ngrx/example-app

Introduction

• Comprehensive Introduction to @ngrx/store
• Reactive Angular 2 with ngrx (video)
• @ngrx/store in 10 minutes (video)

Installation

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)'

Usage

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 });
	}
}

Migrating from Store v1.x

Middleware

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.

getState(), getValue(), and value

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;
}

Contributing

Please read contributing guidelines here.