ng2-redux

Angular 2 bindings for Redux.

For Angular 1 see ng-redux

Ng2Redux lets you easily connect your Angular 2 components with Redux, while still respecting the Angular 2 idiom.

Features include:

The ability to access slices of store state as Observables
Compatibility with existing Redux middleware and enhancers
Compatibility with the existing Redux devtools Chrome extension
A rich, declarative selection syntax using the @select decorator

In addition, we are committed to providing insight on clean strategies for integrating with Angular 2's change detection and other framework features.

Installation
Quick Start
Examples
Resources
In Depth Usage
API

Installation

npm install --save ng2-redux

Quick Start

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './containers/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Import the NgReduxModule class and add it to your application module as an import. Once you've done this, you'll be able to inject NgRedux into your Angular 2 components. In your top-level app module, you can configure your Redux store with reducers, initial state, and optionally middlewares and enhancers as you would in Redux directly.

import { NgReduxModule, NgRedux } from 'ng2-redux';
import reduxLogger from 'redux-logger';
import { rootReducer } from './reducers';

interface IAppState { /* ... */ };

@NgModule({
  /* ... */
  imports: [ /* ... */, NgReduxModule ]
})
export class AppModule {
  constructor(ngRedux: NgRedux<IAppState>) {
    ngRedux.configureStore(rootReducer, {}, [ createLogger() ]);
  }
}

Or if you prefer to create the Redux store yourself you can do that and use the provideStore() function instead:

import {
  applyMiddleware,
  Store,
  combineReducers,
  compose,
  createStore
} from 'redux';
import { NgReduxModule, NgRedux } from 'ng2-redux';
import reduxLogger from 'redux-logger';
import { rootReducer } from './reducers';

interface IAppState { /* ... */ };

export const store: Store<IAppState> = createStore(
  rootReducer,
  compose(applyMiddleware(reduxLogger)));

@NgModule({
  /* ... */
  imports: [ /* ... */, NgReduxModule ]
})
class AppModule {
  constructor(ngRedux: NgRedux<IAppState>) {
    ngRedux.provideStore(store);
  }
}

Now your Angular 2 app has been reduxified! Use the @select decorator to access your store state, and .dispatch() to dispatch actions:

import { select } from 'ng2-redux';

@Component({
  template: '<button (click)="onClick()">Clicked {{ count | async }} times</button>'
})
class App {
  @select() count$: Observable<number>;

  constructor(private ngRedux: NgRedux<IAppState>) {}

  onClick() {
    this.ngRedux.dispatch({ type: INCREMENT });
  }
}

Examples

Here are some examples of Ng2Redux in action:

Companion Packages

Resources

In-Depth Usage

Ng2Redux has two main usage patterns: the select pattern and the connect pattern.

We also have a number of 'cookbooks' for specific Angular 2 topics:

gernsdorfer/ng2-redux