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 like ngrx/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 [email protected]:Indoqa/angular2-ngrx-redux-example.git
cd angular2-ngrx-redux-example
yarn install
Start dev environment and open http://localhost:4200
npm start
- Created with Angular2 CLI
- Redux binding: @angular-redux/store
- Ngrx binding: ngrx/store
- All stores use immutablejs 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)