Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including ng2-redux with all npm packages installed. Try it out:

require("@angular/core/package.json"); // @angular/core is a peer dependency. require("redux/package.json"); // redux is a peer dependency. var ng2Redux = require("ng2-redux")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ng2-redux v5.1.2

Angular 2 bindings for Redux

ng2-redux

Angular 2 bindings for Redux.

For Angular 1 see ng-redux

Join the chat at https://gitter.im/angular-redux/ng2-redux CircleCI npm version npm downloads

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

Ng2Redux has a peer dependency on redux, so we need to install it as well.

npm install --save redux 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 uses an approach to redux based on RxJS Observables to select and transform data on its way out of the store and into your UI or side-effect handlers. Observables are an efficient analogue to reselect for the RxJS-heavy Angular world.

Read more here: Select Pattern

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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free