Angular 2 + ngrx examples, inspired by official redux examples.
These examples illustrate how to utilize ngrx within an Angular 2 application. This repository will be actively maintained and updated as new tools and functionality become available and best practices are established.
As Angular 2 and ngrx are relatively new, patterns and best practices are still being established. Examples found in this repository demonstrate how I (or the project author) would structure the solution but discussion and refinement is always encouraged! Please open an issue, submit a pull request, or drop me a message on twitter to present a different approach or idea. This repository will feature the most solid, agreed upon techniques as they evolve.
Please add any additional Angular 2, ngrx, or reactive programming articles, repositories, or code samples you find useful. I will keep this list as up-to-date as possible!
Additional Angular 2, ngrx, and reactive programming articles, repositories, and code samples:
- Comprehensive Introduction to ngrx/store - Brian Troncone
- Reactive Angular 2 with ngrx - Rob Wormald
- @ngrx/store in 10 minutes - egghead.io - Brian Troncone
- Build a Better Angular 2 Application with Redux and ngrx - Lukas Ruebbelke
- Reactive Data Flow in Angular 2 - Wayne Maurer
- Understand and Utilize the Async Pipe in Angular 2 - Brian Troncone
- Communication Between Components & Components Design - Oren Farhi
- Reactive Angular 2 - NG-NL 2016 - Rob Wormald
- Introduction to RxJS 5 - NG-NL 2016 - Gerard Sans
- Angular 2 Change Detection Explained - Pascal Precht
- Angular 2 and the Single Immutable State Tree - Ciro Nunes
- Build Redux Style Applications with Angular2, RxJS, and ngrx/store - John Linquist
- Step-by-Step Async JavaScript with RxJS - John Lindquist
- RxJS Lessons from Ben Lesh - Ben Lesh
- RxJS Beyond The Basics - Creating Observables From Scratch - André Staltz
- Introduction to Reactive Programming - André Staltz
- Getting Started With Redux - Dan Abramov
- Asynchronous Programming - The End of the Loop - Jafar Husain
- Official ngrx example application - Mike Ryan
- Echo Media Player - Media Player for YouTube - Oren Fahri
- Staffer ngrx/store example -Pavan Podila
- Angular 2 Time Machine - John Lindquist
- NgRx Example - Aleš
- Todo with Undo/Redo - Rob Wormald
- Instagram Filters - Instagram-like photo filter playground - Jay Kan
- ngrx-store-localstorage - Sync local storage with ngrx state slices - Brian Troncone
- ngrx-store-logger - Advanced action/state logging for @ngrx/store applications - Brian Troncone
- ngrx-store-freeze - Prevent state from being mutated in @ngrx/store - Attila Egyed
# clone the repo
git clone https://github.com/btroncone/ngrx-examples.git
# cd into repo
cd ngrx-examples
# cd into project of your choice
cd counter
# install dependencies
npm install
# start the server
npm startProject builds are a stripped down version of Angular Class Webpack Starter, an exceptional Angular 2 seed project. Tests can be executed with either WallabyJS or Karma (soon!).
(source)
A counter which can be incremented, decremented, with the option to increment or decrement async.
- Creating a basic reducer
- Selecting a slice of state
- Using the async pipe
- Dispatching actions from a component
(source)
Basic todo application with add, remove, and toggle complete functionality.
- Initial reducer state
- Managing arrays in reducers
- Multiple reducers
- Combining data from two reducers to project state for view
Same as todos example but with undo/redo functionality.
- Creating a meta-reducer to add undo/redo capability.
(source)
Request and display the latest Angular or React reddit posts, utilizing the reddit API.
- Handling async actions with @ngrx/effects
- Conditionally making requests based on current state
(source)
Request sample inventory, add and remove items from shopping cart, checkout.
- Multiple Reducers
- Handling effects with @ngrx/effects
- Creating and applying selectors for state projection with
let
Add and remove items financial operations, change currency rates
- Multiple Reducers
- Handling effects with @ngrx/effects
- Modifying state projection
- Using state in pipes