Repository files navigation

A simple todo list example that compares the setup and integration of different state handling strategies in angular2:

• Redux bindings with@angular-redux/store
• Redux likengrx/store based on RxJS
• Plain services using observables (without a store)

Every strategy is placed in a separate feature module and covers the same functionality. Presentational components and models are shared using a commons module.

git clone git@github.com:Indoqa/angular2-ngrx-redux-example.gitcd angular2-ngrx-redux-exampleyarn install

Start dev environment and openhttp://localhost:4200

npm start

• Created withAngular2 CLI
• Redux binding:@angular-redux/store
• Ngrx binding:ngrx/store
• All stores useimmutablejs data structures.

• Actions and Reducers in redux and ngrx are exactly the same (at least in this small example ;) ).
• Data manipulation using immutable is identical in all three approaches.
• Observables are used to deliver data to smart components in all three strategies.
• Templates may bind directly to these observables using| async. Change detection may be optimized.
• Smart components may do more advanced reactive manipulations (filtering, sorting, slicing,..) before passing data down to render.
• Redux and Ngrx provide the same dev tools (logging, timetravel, state debugging etc.)
• See articles below for a vast range of meanings, opinions and hints for choosing the right state.

• Angular 2 Smart Components vs Presentation Components: What's the Difference, When to Use Each and Why?
• Angular 2 Service Layers: Redux, RxJs and Ngrx Store - When to Use a Store And Why ?
• Angular 2 Application Architecture - Building Flux Apps with Redux and Immutable.js
• Angular 2  - Introduction to Redux
• Build a Better Angular 2 Application with Redux and ngrx
• Using Redux with Angular - JS Toronto Meetup 2016-07-12
• Getting started with Redux
• Awesome Redux: Community Resources
• ngrx: Comparison to redux
• [From Redux to Angular ngrx/store] (https://julienrenaux.fr/2017/02/16/from-redux-to-angular-ngrxstore/)
• [Angular 2 Service Layers: Redux, RxJs and Ngrx Store - When to Use a Store And Why ?] (https://medium.com/@charlie_gee/redux-vs-rxjs-ngrx-store-db6066058719#.p4l2ss8hi)