Need help with store?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

4.0K Stars 319 Forks MIT License 151 Commits 10 Opened issues


RxJS powered state management for Angular applications, inspired by Redux

Services available


Need anything else?

Contributors list

This repository is for version 2.x of @ngrx/store.

Click here for the latest version (4.x)


RxJS powered state management for Angular applications, inspired by Redux

Join the chat at CircleCI Status for ngrx/store npm version

@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

, an observable of state and an observer of actions

These core principles enable building components that can use the

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/[email protected] --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.



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;

        return state;


In your app's main module, import those reducers and use the

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

service into your components and services. Use
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: ` Increment

Current Count: {{ counter | async }}

    <button>Reset Counter</button>

}) class MyAppComponent { counter: Observable;

constructor(private store: Store<appstate>){
    this.counter ='counter');

increment(){{ type: INCREMENT });

decrement(){{ type: DECREMENT });

reset(){{ type: RESET });



Please read contributing guidelines here.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.