ng2-redux v5.1.2
ng2-redux
Angular 2 bindings for Redux.
For Angular 1 see ng-redux
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:
- 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
Resources
- Using Redux with Angular 2 - JS Toronto Meetup 2016-07-12
- Angular 2 and Redux from Rangle.io
- Getting started with Redux
- Awesome Redux: Community 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:
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago