Need Private Modules

    This package has been deprecated

    Author message:

    This package has moved. Please 'npm install @angular-redux/store' instead.

    ng2-redux
    TypeScript icon, indicating that this package has built-in type declarations

    5.1.2 • Public • Published

    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:

    Install

    npm i ng2-redux

    DownloadsWeekly Downloads

    111

    Version

    5.1.2

    License

    MIT

    Last publish

    Collaborators

    • e-schultz
    • sethdavenport
    • wbuchwalter