Angular bindings for Redux.

For Angular 1 see ng-redux

@angular-redux/store lets you easily connect your Angular components with Redux, while still respecting the Angular 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's change detection and other framework features.

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

@angular-redux/store has a peer dependency on redux, so we need to install it as well.

npm install --save redux @angular-redux/store

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 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 '@angular-redux/store';
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 '@angular-redux/store';
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 app has been reduxified! Use the @select decorator to access your store state, and .dispatch() to dispatch actions:

import { select } from '@angular-redux/store';

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

Here are some examples of the angular-redux family of packages in action:

• Zoo Animals Combined Example App
• Simple SystemJS Example (Angular Quickstart)

• Reduxify your Routing with @angular-redux/router
• Reduxify your Forms with @angular-redux/form

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

@angular-redux/store 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 topics:

• Using Angular's Dependency Injector with Action Creators
• Using Angular's Dependency Injector with Middlewares
• Managing Side-Effects with redux-observable Epics
• Using the Redux DevTools Chrome Extension
• @angular-redux/store and ImmutableJS
• Strongly Typed Reducers