@angular-redux/core

@angular-redux/core

Angular bindings for Redux.

For Angular 1 see ng-redux

@angular-redux/core 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 2's change detection and other framework features.

Table of Contents

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

Installation

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

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

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 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/core';
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/core';
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/core';

@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:

• 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)
• Simple SystemJS Example (Angular Quickstart)

Companion Packages

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

Resources

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

In-Depth Usage

@angular-redux/core 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
• Ng2Redux and ImmutableJS
• Strongly Typed Reducers