angular-2-redux

Redux bindings for angular 2

UPDATE

• Works now with Angular2 beta.1
• Pure ES6 example app in the repository

Quick start

1. Install via NPM

npm install angular-2-redux

2. Bootstrap provider

import reduxBindProvider from 'angular-2-redux';

...

bootstrap(App, [
    reduxBindProvider(store)
]);

3. Inject reduxStore into component

• Injections are not supported as parameter decorators anymore as this doesnt comply with the ES7 standard
• Thus use @Reflect.metadata directly() as shown in the example

...

@Reflect.metadata('parameters', [[new InjectMetadata('reduxStore')]])
class Content {
    constructor(reduxStore) {
        this.reduxStore = reduxStore;

...

4. angular-2-redux supports Rxjs observables or direct component binding

With a direct bind, your components properties will get updated directly.

Binding components directly will automatically update the .appState property of the component. e.g. this.appState.XYZ where XYZ is the redux store property.

this.unsubscribe = reduxStore.bindStore()(this);

Using the observable, you will be notified on every update and can handle it like with a listening function.

this.source = reduxStore.createObservable();
this.source.subscribe((state) => {
    console.log(state);
});

Example

Take a look in build/testApp.

1. Install live-server

npm install -g live-server

2. Run live server and navigate to build/testApp

live-server