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.
- The ability to access slices of store state as
- Compatibility with existing Redux middleware and enhancers
- Compatibility with the existing Redux devtools Chrome extension
- A rich, declarative selection syntax using the
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
Ng2Redux has a peer dependency on redux, so we need to install it as well.
npm install --save redux ng2-redux
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.
Or if you prefer to create the Redux store yourself you can do that and use the
provideStore() function instead:
Now your Angular 2 app has been reduxified! Use the
@select decorator to
access your store state, and
.dispatch() to dispatch actions:
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)
- 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
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: