Angular

Chapter 41: ngrx
Ngrx is a powerful library that you can use with Angular2. The idea behind is to merge two concepts that plays well
together to have a reactive app with a predictable state container : - [Redux][1] - [RxJs][2] The main advantages : -
Sharing data in your app between your components is going to easier - Testing your app core logic consists to test
pure functions, without any dependency on Angular2 (very easy so !) [1]: http://redux.js.org [2]:
http://reactivex.io/rxjs
Section 41.1: Complete example : Login/logout a user
Prerequisites
This topic is not about Redux and/or Ngrx :
You need to be comfortable with Redux
At least understand the basics of RxJs and Observable pattern
First, let's define an example from the very beginning and play with some code :
As a developer, I want to :
1.
2.
3.
4.
5.
6.
Have an IUser interface that defines the properties of a User
Declare the actions that we'll use later to manipulate the User in the Store
Define the initial state of the UserReducer
Create the reducer UserReducer
Import our UserReducer into our main module to build the Store
Use data from the Store to display information in our view
Spoiler alert : If you want to try the demo right away or read the code before we even get started, here's a Plunkr
(embed view or run view).
1) Define IUser interface
I like to split my interfaces in two parts :
The properties we'll get from a server
The properties we define only for the UI (should a button be spinning for example)
And here's the interface IUser we'll be using :
user.interface.ts
export interface IUser {
// from server
username: string;
email: string;
// for UI
isConnecting: boolean;
isConnected: boolean;
};
2) Declare the actions to manipulate the User
GoalKicker.com – Angular 2 Notes for Professionals 147