qdouble-store

RxJS powered state management for Angular applications, inspired by Redux

Showing:

Popularity

Downloads/wk

2

GitHub Stars

4K

Maintenance

Last Commit

4yrs ago

Contributors

21

Package

Dependencies

0

Size (min+gzip)

1.3KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

Readme


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

Click here for the latest version (4.x)


@ngrx/store

RxJS powered state management for Angular applications, inspired by Redux

Join the chat at https://gitter.im/ngrx/store 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 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/core and @ngrx/store from npm:

npm install @ngrx/core @ngrx/store@2.2.3 --save

Optional packages:

Examples

  • 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.

Introduction

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

Contributing

Please read contributing guidelines here.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial