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.

Table of Contents

• Installation
• Quick Start
• Examples
• Resources
• In Depth Usage
• API

Installation

npm install --save ng2-redux

Quick Start

Import the NgRedux class and add it to your application as an Angular 2 provider.

import { bootstrap } from '@angular/platform-browser-dynamic';
import { App } from './containers/App';

bootstrap(App, [ NgRedux ]);

Once you've done this, you'll be able to inject 'NgRedux' into your Angular 2 components. In your top-level app component, you can configure your Redux store with reducers, initial state, and optionally middlewares and enhancers as you would in Redux directly.

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

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

@Component({ /* ... */ })
class App {
  constructor(private ngRedux: NgRedux<IAppState>) {
    this.ngRedux.configureStore(rootReducer, {}, [ reduxLogger() ]);
  }
}

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

@Component({ /* ... */ })
class App {
  constructor(private ngRedux: NgRedux<IAppState>) {
    this.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:

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

  constructor(private ngRedux: NgRedux<IAppState>) {
    this.ngRedux.provideStore(store);
  }

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

Examples

Here are some examples of Ng2Redux in action:

• Counter: basic select pattern example
• Trendy Brunch: multi-reducer example with redux-localstorage
• Plnkr: smart & presentational components example
• Angular2-redux-starter from Rangle.io (with Epic, devtools)

Resources

• Using Redux with Angular 2 - JS Toronto Meetup 2016-07-12
• Angular 2 and Redux from Rangle.io
• Getting started with Redux
• Awesome Redux: Community Resources

In-Depth Usage

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

• Select Pattern
• Connect Pattern

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

• Using Angular 2's Dependency Injector with Action Creators
• Using Angular 2's Dependency Injector with Middlewares
• Managing Side-Effects with redux-observable Epics
• Using the Redux DevTools Chrome Extension
• Ng2Redux and ImmutableJS