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
;; platformBrowserDynamic.bootstrapModuleAppModule;
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.
;;; ;
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:
;
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: