README.md


The documentation below is for NgRx versions 6.x and older.

Visit https://ngrx.io for the latest documentation.


@ngrx/store

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.

Installation

Install @ngrx/store from npm:

npm install @ngrx/store or yarn add @ngrx/store

Nightly builds

npm install github:ngrx/store-builds or yarn add github:ngrx/store-builds

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:

// counter.ts
import { Action } from '@ngrx/store';

export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
export const RESET = 'RESET';

const initialState = 0;

export function counterReducer(state: number = initialState, action: Action) {
  switch (action.type) {
    case INCREMENT:
      return state + 1;

    case DECREMENT:
      return state - 1;

    case RESET:
      return 0;

    default:
      return state;
  }
}

To register the state container within your application, import the reducers and use the StoreModule.forRoot function in the imports array of the @NgModule decorator for your AppModule.

import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { counterReducer } from './counter';

@NgModule({
  imports: [StoreModule.forRoot({ count: counterReducer })],
})
export class AppModule {}

You can then inject the Store service into your components and services. Use select operator to select slice(s) of state:

import { Component } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs';
import { INCREMENT, DECREMENT, RESET } from './counter';

interface AppState {
  count: number;
}

@Component({
  selector: 'app-my-counter',
  template: `
    <button (click)="increment()">Increment</button>
    <div>Current Count: {{ count$ | async }}</div>
    <button (click)="decrement()">Decrement</button>

    <button (click)="reset()">Reset Counter</button>
  `,
})
export class MyCounterComponent {
  count$: Observable<number>;

  constructor(private store: Store<AppState>) {
    this.count$ = store.pipe(select('count'));
  }

  increment() {
    this.store.dispatch({ type: INCREMENT });
  }

  decrement() {
    this.store.dispatch({ type: DECREMENT });
  }

  reset() {
    this.store.dispatch({ type: RESET });
  }
}

API Documentation

Additional Material