• Like in Flux, in Redux data flow is unidirectional
• Unlike Flux, there is a single store in Redux. Store is immutable. Every time a new object tree is created with data from the previous state plus what is changed
• The change is performed by reducers which are pure functions with no side effects
• No central Dispatcher in Redux. When an action needs to be executed then the dispatch() method of the store is called, passing the action as parameter. Then all listeners are informed the state has changed

							Stream(loadMagazineEveryMonth$).pipe(
								filter(magazine => magazine.month === 'April')
							).subscribe(magazine => console.log(magazine.news));

							// What: I want to retrieve only the April edition.
							// How: I don't care..
						

• RxJS is a JavaScript implementation of the Reactive Extensions. Rx is a reactive programming model originally created at Microsoft. Instead of streams in RxJS the main entity is the Observables

								Observable {
									producer => events
									push values => consumer(observer)
									unsubscribe();
								}
							

• RxJS is mostly about Observables and Observers… but it’s also about Subjects.

									Subject {
										producer => events
										push values => list of consumers(observers)
										unsubscribe();
										next(); complete(); error(); // can be both Observable and Observer
									}
							

• While plain Observables are unicast (each subscribed Observer owns an independent execution of the Observable), Subjects are multicast. Values can be multicasted to many Observers.
• Because of this and because of its twofold nature, Subject and BehaviourSubject are the best candidates for our store implementation.

• Angular uses Zone.js internally to trigger change detection on every browser event or http request or setTimeout or observable emission, etc.
• The default change detection mechanism compares ('===') the current value with the previous value for each expression used in template for every component.
• But, if a component depends only on its inputs, we can instruct angular to trigger change detection only if one of its inputs has changed (ChangeDetectionStrategy.OnPush).
• This requires immutable input properties

• @ngrx/store - The core lib that gives us the tools to maintain state and dispatch actions.
• @ngrx/schematics - Automates NgRx code generation. Scaffolding library that helps you generate files and code. Time-saver.
• @ngrx/effects - Handles external interactions such as, network requests, web socket messages and time-based events. Isolates side effects from components.
• @ngrx/router-store - Integrates NgRx with the Angular routing.
• @ngrx/store-devtools - Tool for NgRx debugging (time travel debugging functionality).
• @ngrx/entity - Provides an API to manipulate and query entity collections

1. Trace the actions were dispatched
2. The impact of this actions to the store

We can conrtol time in our store by replaying dispatched actions.

Here are our goals:

1. Show elements depending on a user being logged in or not
2. Make routes unavailable if a user shouldn’t have access to them
3. Handle unauthorized (Status 401) response
4. Handle authentication lifecycle

Let's see some examples of these requirements in the demo

Create the State interface (libs/src/+state/auth.interfaces.ts):

								export interface Auth {
									loggedIn: boolean;
									user: User;
									status: Status;
								}
								  
								export interface AuthState {
									readonly auth: Auth;
								}
								  
								export interface User {
									email: string;
									token: string;
									username: string;
									bio: string;
									image: string;
								}

								export type Status = 'INIT' | 'IN_PROGRESS';
						

Initialize the state (libs/src/+state/auth.init.ts):

									export const authInitialState: Auth = {
										loggedIn: false,
										status: 'INIT',
										user: {
										  email: '',
										  token: '',
										  username: '',
										  bio: '',
										  image: ''
										}
									  };
							

• In our app architecture we want to follow the seperation of concerns pronciple (reducers=>business logic, effects=>side effects, smart-dump components)
• Things that have to do only with the authentication of our app should be isolated and decoupled. We have a module(lib) that encapsulates and abstracts all these related things
• We have feature modules and each one of them contributes to the global state
• NgRx provides us with a method called "forFeature()" that allows us to add the feature state to the global app state once the feature is loaded(eagerly, lazily).

3. Next we create the reducer and register it to the module (libs/src/+state/auth.reducer.ts).

						// (libs/src/+state/auth.reducer.ts)
						export function authReducer(state: Auth, action: AuthAction): Auth {
							switch (action.type) {
								default: {
									return state;
								}
							}
					

						// (libs/src/auth.module.ts)
						imports: [
							...
							StoreModule.forFeature('auth', authReducer, { initialState: authInitialState })
						]
					

Our world until now was synchronous.

Generally, NgRx promotes functional programming. Reducers, selectors, RxJS operators are pure functions. This means that they produce no side effects.

But, side effects are impossible to avoid. We can isolate side effects (http calls, read from a file, write to localStorage) through ngrx/effects so that the rest of our ngrx implementation be composed of pure functions.

Effects:
1. Listen for actions dispatched from @ngrx/store
2. Isolate side effects from components, allowing for more pure components that select state and dispatch actions
3. Provide a new action to reduce state based on external interactions such as network requests, web socket messages and time-based events.

4. Next we create the effects class and register it to the module (libs/src/+state/auth.effects.ts).

						// (libs/src/+state/auth.effects.ts)
						@Injectable()
						export class AuthEffects {
							@Effect()
							getUser ...
						}

					

							// (libs/src/auth.module.ts)
							imports: [
								...
								StoreModule.forFeature('auth', authReducer, { initialState: authInitialState }),
								EffectsModule.forFeature([AuthEffects])
							]
						

							// (libs/auth/src/login/login.component.ts)
							submit() {
								this.store.dispatch(new fromActions.Login());
							}

							// (libs/auth/src/+state/auth.actions.ts)
							import { Action } from '@ngrx/store';
							export const enum AuthActionTypes {
								LOGIN = '[auth] LOGIN',
								LOGIN_SUCCESS = '[auth] LOGIN_SUCCESS',
								LOGIN_FAIL = '[auth] LOGIN_FAIL'
								...
							}
					

						// (libs/auth/src/+state/auth.effects.ts)
						@Effect()
						login = this.actions.ofType(AuthActionTypes.LOGIN).pipe(
							withLatestFrom(this.store.select(fromNgrxForms.getData)),
							exhaustMap(([action, data]) =>
								this.authService.authUser('LOGIN', data).pipe(
									map(result => new fromActions.LoginSuccess(result.user)),
									catchError(result => of(new fromNgrxForms.SetErrors(result.error.errors)))
								)
							)
						);
					

					// (libs/auth/src/+state/auth.reducers.ts)
					
					export function authReducer(state: Auth, action: AuthAction): Auth {
						switch (action.type) {case AuthActionTypes.LOGIN:
							...
							case AuthActionTypes.REGISTER: {
								return { ...state, status: 'IN_PROGRESS' };
							}
							case AuthActionTypes.REGISTER_SUCCESS:
							case AuthActionTypes.LOGIN_SUCCESS: {
								return {
									...state,
									loggedIn: true,
									status: 'INIT',
									user: action.payload
								};
							}
							case AuthActionTypes.LOGIN_FAIL:
							case AuthActionTypes.REGISTER_FAIL: {
								return { ...state, status: 'INIT' };
							}
							...
					

				@Effect({ dispatch: false })
				loginRegisterSuccess =
					this.actions.ofType(AuthActionTypes.LOGIN_SUCCESS, AuthActionTypes.REGISTER_SUCCESS).pipe(
						tap(action => {
							this.localStorageJwtService.setItem(action.payload.token);
							this.router.navigateByUrl('/');
						})
					);	
					

Selectors are just functions, that allow us, to get only the part of the application state, that we are interested in.Because selectors are pure functions, the last result can be returned when the arguments match without reinvoking your selector function. This can provide performance benefits.

						export const getAuth = createFeatureSelector('auth');
						export const getLoggedIn = createSelector(getAuth, (auth: Auth) => auth.loggedIn);
						export const getUser = createSelector(getAuth, (auth: Auth) => auth.user);
					

A mnemonic from Mike Ryan and Brandon Robert @ ng-conf

and also...