NGRX

RXJS

RxJS is a library for composing asynchronous and event-based programs by using observable sequences.

Subject

a specific kind of observable called Subject. Subjects are observables themselves but what sets them apart is that they are also observers.

What does that mean? It means that a subject can emit data, on top of having the capability to be subscribed to.

A regular observable does not have the next() method as regular observables are not observers. So that’s the first super power of a subject: Data emission.

Subjects are like EventEmitters: They maintain a registry of many listeners.

let subject = new Subject<string>();
// We subscribe to the subject
subject.subscribe((data) => {
  console.log("Subscriber got data >>>>> "+ data);
});

// We use the subject to emit data
subject.next("Eureka");

// Console result: Subscriber got data >>>>> Eureka

Subjects are multicast

The second super power of subjects is that they support multiple subscriptions. In other words, they are multicast.

Subjects are like EventEmitters: They maintain a registry of many listeners.

let subject = new Subject<string>();

subject.subscribe((data) => {
  console.log("Subscriber 1 got data >>>>> "+ data);
});
subject.subscribe((data) => {
  console.log("Subscriber 2 got data >>>>> "+ data);
});

subject.next("Eureka");

// Console result:
// Subscriber 1 got data >>>>> Eureka
// Subscriber 2 got data >>>>> Eureka

Behavior Subjects

Behavior Subjects are another cool thing about subjects. When you subscribe to a behavior subject, it will give you the last emitted value right away.

Imagine subscribing to a magazine, and right away you receive the latest published issue of it. Wouldn’t that be awesome? Welcome to the world of behavior subjects!

// Behavior subjects need a first value
let subject = new BehaviorSubject<string>("First value");

subject.asObservable().subscribe((data) => {
  console.log("First subscriber got data >>>>> "+ data);
});

subject.next("Second value")

// Console result:
// First subscriber got data >>>>> First value
// First subscriber got data >>>>> Second value

Replay Subjects

Replay Subjects keep a given number of historical values so that those values can be replayed to new subscribers.

// We tell the ReplaySubject how many values should be kept in      // history
let subject = new ReplaySubject<string>(2);

subject.next("First value");
subject.next("Second value");
subject.next("Third value");

subject.asObservable().subscribe((data) => {
  console.log("First subscriber got data >>>>> "+ data);
});

subject.next("Fourth value");

//Console result:
// First subscriber got data >>>>> Second value
// First subscriber got data >>>>> Third value
// First subscriber got data >>>>> Fourth value

state

Ngrx store helps you build more robust applications by better organizing your app's state -- or in other words, your app's data. Without a state management solution, dealing with complex data across multiple components can become quite difficult to handle and test.

What is Ngrx

Ngrx is a group of Angular libraries for reactive extensions. Ngrx/Store implements the Redux pattern using the well-known RxJS observables of Angular 2. It provides several advantages by simplifying your application state to plain objects, enforcing unidirectional data flow, and more. The Ngrx/Effects library allows the application to communicate with the outside world by triggering side effects.

Redux

Redux is a predictable state container for JavaScript apps.

Redux is a popular approach to managing state in applications. It emphasises:

A single, immutable data store. One-way data flow. An approach to change based on pure functions and a stream of actions.

What Is Reactive Programming?

Reactive programming is a way applications handle events and data flow in your applications. In reactive programming, you design your components and other pieces of your software in order to react to those changes instead of asking for changes.

A Word about Ngrx

In order to understand the application you will build through this tutorial, you must make a quick dive into the core Redux concepts.

Store

The store can be seen as your client side database but, more importantly, it reflects the state of your application. You can see it as the single source of truth.

It is the only thing you alter when you follow the Redux pattern and you modify by dispatching actions to it.

Reducer

Reducers are the functions that know what to do with a given action and the previous state of your app.

The reducers will take the previous state from your store and apply a pure function to it. Pure means that the function always returns the same value for the same input and that it has no side effects.

From the result of that pure function, you will have a new state that will be put in your store.

Actions

Actions are the payload that contains needed information to alter your store. Basically, an action has a type and a payload that your reducer function will take to alter the state.

Dispatcher

Dispatchers are simply an entry point for you to dispatch your action. In Ngrx, there is a dispatch method directly on the store.

Middleware

Middleware are some functions that will intercept each action that is being dispatched in order to create side effects, even though you will not use them in this article.

They are implemented in the Ngrx/Effect library, and there is a big chance that you will need them while building real-world applications.

How to Install ngrx

only store

npm install --save @ngrx/store  @ngrx/core

only effects

npm install --save @ngrx/effects

Defining your Main Application State

When building an application using Redux, the first thing to think about is, "What state do I want to store?" It is generally a good idea to capture all of the application's state so that it can be accessible from anywhere and all in one place for easy inspection.

In the application state, we store things like:

1.Data received through API calls

2.User input

3.Presentation state, such as menu and button toggles

4.Application preferences

5.Internationalization messages

6.Themes and other customizable areas of your application

To define your application state, use an interface called AppState or IAppState, depending on the naming conventions used on your project.

Example Application

Your app will allow users to increment and decrement a number by one, as well as reset that value back to zero. Here's the AppState that we'll be using throughout the example:

app/models/appState.ts

import {Counter} from './counter';

export interface AppState {
  readonly counter: Counter;
}

app/models/counter.ts

export interface Counter {
  readonly currentValue: number;
}

Reading your Application State using Selectors

To read your application state in Redux, we need to use the select() method on @ngrx's Store class. This method creates and returns an Observable that is bound to a specific property in your application state.

For example, here's how you would select the counter object:

store.select('counter'); // Returns Observable<Counter>

And to fetch the counter's currentValue, we can pass in a string array, where each string plucks a single property from the application state one at a time in the order specified:

store.select(['counter', 'currentValue']); // Returns Observable<number>

While select() allows for several variations of strings to be passed in, it has it's shortcomings - namely you won't actually know if the plucking is working properly until you execute your code.

Because of that, select() allows you to select values using functions too, which makes things more type-safe and your selectors will be more refactorable by your IDE.

store.select(appState => appState.counter.currentValue);

Selectors are methods used for obtaining slices of store state. @ngrx/store provides

a few helper functions for optimizing this selection.

When using the createSelector and createFeatureSelector functions @ngrx/store keeps track of the latest arguments in which your selector function was invoked.

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, particularly with selectors that perform expensive computation. This practice is known as memoization.

Using a selector for one piece of state

// reducers.ts
import { createSelector } from '@ngrx/store';

export interface FeatureState {
  counter: number;
}

export interface AppState {
  feature: FeatureState;
}

export const selectFeature = (state: AppState) => state.feature;
export const selectFeatureCount = createSelector(
  selectFeature,
  (state: FeatureState) => state.counter
);

Creating a Counter Service

While you could inject Store and select values directly in your Angular components, it's considered to be a best practice to wrap this functionality into separate services.

This approach encapsulates all of the selection logic and eliminates any duplication where the selection path is repeated throughout your application.

Let's tie everything together by building out a CounterService example:

app/services/counter.service.ts

import {Injectable} from '@angular/core';
import {Store} from '@ngrx/store';
import {Observable} from 'rxjs/Observable';

import {AppState} from '../models';

@Injectable()
export class CounterService {

  constructor(private store: Store<AppState>) {}

  getCurrentValue(): Observable<number> {
    return this.store.select(appState => appState.counter.currentValue)
      .filter(Boolean);
  }

}

Because select() returns an Observable, the getCurrentValue() method also applies a filter() to ensure that subscribers do not receive any falsy values.

This greatly simplifies the code and templates in your components, since they don't have to repeatedly consider the falsy case everywhere the value is used.

Store

Like a traditional database represents the point of record for an application, your store can be thought of as a client side ‘single source of truth’, or database.

By adhering to the 1 store contract when designing your application, a snapshot of store at any point will supply a complete representation of relevant application state.

This becomes extremely powerful when it comes to reasoning about user interaction, debugging, and in the context of Angular 2, performance.

Actions

Redux uses a concept called Actions, which describe state changes to your application.

Store encompasses our application state and reducers output sections of that state, but how do we communicate to our reducers when state needs to be updated? That is the role of 4 actions.

Within a store application, all user interaction that would cause a state update must be expressed in the form of actions.

All relevant user events are dispatched as actions, flowing through the 5 action pipeline defined by store, before a new representation of state is output.

This process occurs each time an action is dispatched, leaving a complete, serializable representation of application state changes over time.

Redux actions are simple JSON objects that implement the Action interface provided by @ngrx:

export interface Action {
  type: string;
  payload?: any;
}

The type property is a string used to uniquely identify your action to your application. It's a common convention to use lisp-case (such as MY_ACTION),

however you are free to use whatever casing style that makes to your team, as long as it's consistent across the project.

The payload property provides a way to pass additional data to other parts of Redux, and it's entirely optional.

Here is an example:

const loginSendAction: Action = {
  type: 'LOGIN_SEND',
  payload: {
    username: 'katie',
    password: '35c0cd1ecbbb68c75498b83c4e79fe2b'
  }
};

To simplify action creation, you can create a factory function to take care of the repeating parts within your application:

app/store/createAction.ts

import {Action} from '@ngrx/store';

export function createAction(type, payload?): Action {
  return { type, payload };
}

The resulting creation of the LOGIN_SEND action becomes much more succinct and cleaner:

const loginSendAction: Action = createAction('LOGIN_SEND', {
  username: 'katie',
  password: '35c0cd1ecbbb68c75498b83c4e79fe2b'
});

simple actions

//simple action without a payload
dispatch({type: 'DECREMENT'});

//action with an associated payload
dispatch({type: ADD_TODO, payload: {id: 1, message: 'Learn ngrx/store', completed: true}})

Reducers

The second integral part of a store application is reducers. A 2 reducer is a 3 pure function, accepting two arguments, the previous state and an action with a type and optional data (payload) associated with the event.

Using the previous analogy, if store is to be thought of as your client side database, reducers can be considered the tables in said database.

Reducers represent sections, or slices of state within your application and should be structured and composed accordingly.

2 Reducer Interface

export interface Reducer<T> {
  (state: T, action: Action): T;
}

3 A function whose return value is determined only by its input values, with no observable side-effects.

Sample Reducer

export const counter: Reducer<number> = (state: number = 0, action: Action) => {
    switch(action.type){
        case 'INCREMENT':
            return state + 1;
        case 'DECREMENT':
            return state - 1;
        default:
            return state;
    }
};

Effects

to install effects

npm install @ngrx/effects --save

Effects are injectable service classes that use two main APIs.

Effect decorator

The Effect decorator provides metadata to register observable side-effects in the effects class. Registered effects provide new actions provided by the source Observable to the store.

Actions Observable

Represents an observable of all actions dispatched to the store.

Emits the latest action after the action has passed through all reducers.

The ofType operator lets you filter for actions of a certain type in which you want to use to perform a side effect.

Setup

Create an AuthEffects service that describes a source of login actions:

// ./effects/auth.effects.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Action } from '@ngrx/store';
import { Actions, Effect, ofType } from '@ngrx/effects';
import { Observable, of } from 'rxjs';
import { catchError, map, mergeMap } from 'rxjs/operators';

@Injectable()
export class AuthEffects {
  // Listen for the 'LOGIN' action
  @Effect()
  login$: Observable<Action> = this.actions$.pipe(
    ofType('LOGIN'),
    mergeMap(action =>
      this.http.post('/auth', action.payload).pipe(
        // If successful, dispatch success action with result
        map(data => ({ type: 'LOGIN_SUCCESS', payload: data })),
        // If request fails, dispatch failed action
        catchError(() => of({ type: 'LOGIN_FAILED' }))
      )
    )
  );

  constructor(private http: HttpClient, private actions$: Actions) {}
}

Register the EffectsModule in your application root imports.

This EffectsModule must be added to your root NgModule for the effects providers to be registered and start when your application is loaded.

import { EffectsModule } from '@ngrx/effects';
import { AuthEffects } from './effects/auth.effects';

@NgModule({
  imports: [EffectsModule.forRoot([AuthEffects])],
})
export class AppModule {}

For feature modules, register your effects via EffectsModule.forFeature method in your module's imports:

import { EffectsModule } from '@ngrx/effects';
import { AdminEffects } from './effects/admin.effects';

@NgModule({
  imports: [EffectsModule.forFeature([AdminEffects])],
})
export class AdminModule {}

Effects with dispatch:false

if you do not want to dispatch action then place @Effects({dispatch:flase})

Sample Example Application

In action file

import { Action } from '@ngrx/store';

 //export const INCREMENT='INCREMENT';
export enum ActionTypes {
  Increment = '[Counter Component] Increment',
  Decrement = '[Counter Component] Decrement',
  Reset = '[Counter Component] Reset',
}

export class Increment implements Action {
  readonly type = ActionTypes.Increment;
}
 //export class Increment implements Action {
 // readonly type = INCREMENT;
//}

export class Decrement implements Action {
  readonly type = ActionTypes.Decrement;
}

export class Reset implements Action {
  readonly type = ActionTypes.Reset;
}

In Reducers File

import { Action } from '@ngrx/store';
import { ActionTypes } from './counter.actions';
//import * as ActionTypes from './counter.actions';
export const initialState = 0;

export function counterReducer(state = initialState, action: ActionTypes:ActionTypes) {
  switch (action.type) {
  //case ActionTypes.INCREMENT:
 // return state+1;
    case ActionTypes.Increment:
      return state + 1;

    case ActionTypes.Decrement:
      return state - 1;

    case ActionTypes.Reset:
      return 0;

    default:
      return state;
  }
}

Import the StoreModule from @ngrx/store and the counter.reducer file.

src/app/app.module.ts (imports)

import { StoreModule } from '@ngrx/store';
import { counterReducer } from './counter.reducer';

Add the StoreModule.forRoot function in the imports array of your AppModule with an object containing the count and the counterReducer that manages the state of the counter.

The StoreModule.forRoot() method registers the global providers needed to access the Store throughout your application.

src/app/app.module.ts (StoreModule)

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { StoreModule } from '@ngrx/store';
import { counterReducer } from './counter.reducer';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    StoreModule.forRoot({ count: counterReducer })
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Create a new Component named my-counter in the app folder. Inject the Store service into your component to dispatch the counter actions, and use the select operator to select data from the state.

Update the MyCounterComponent template with buttons to call the increment, decrement, and reset methods. Use the async pipe to subscribe to the count$ observable.

src/app/my-counter/my-counter.component.html

<button (click)="increment()">Increment</button>

<div>Current Count: {{ count$ | async }}</div>

<button (click)="decrement()">Decrement</button>

<button (click)="reset()">Reset Counter</button>

Update the MyCounterComponent class with a selector for the count, and methods to dispatch the Increment, Decrement, and Reset actions.

src/app/my-counter/my-counter.component.ts

import { Component } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs';
import { Increment, Decrement, Reset } from '../counter.actions';
// import * as FromApp from './app/app.state;
//import * as FromActions from './counter.action
@Component({
  selector: 'app-my-counter',
  templateUrl: './my-counter.component.html',
  styleUrls: ['./my-counter.component.css'],
})
export class MyCounterComponent {
  count$: Observable<number>;

  constructor(private store: Store<{ count: number }>) {
    this.count$ = store.pipe(select('count'));
  }
 //constructor(private store: Store<fromApp.AppState>) {
  //  this.count$ = store(select('count'));
 // }
  //increment() {
   // this.store.dispatch(new FromActions.Increment());
  //}
  increment() {
    this.store.dispatch(new Increment());
  }

  decrement() {
    this.store.dispatch(new Decrement());
  }

  reset() {
    this.store.dispatch(new Reset());
  }
}

Add the MyCounter component to your AppComponent template.

src/app/app.component.html

<app-my-counter></app-my-counter>

And that's it! Click the increment, decrement, and reset buttons to change the state of the counter.

Meta-Reducers

For log all actions and states

Why use ngRx/effects for async calls

Using ngrx/effects makes life more simpler than using service to make http call and then take the result and dispatch the action. As following

Effects provide abstraction to the service layer. Our components don't need to know about the services(http) layer. Components will only dispatch actions to get things done.

As Effects are basically service, code is written once and reused multiple times.

Example

Creating the Model

export interface Tutorial { name: string; url: string; }

Creating an Action

An action in Ngrx/store is two things:

1.A type in the form of a string. It describes what's happening.

2.It contains an optional payload of data.

import { Injectable } from '@angular/core'
import { Action } from '@ngrx/store'
import { Tutorial } from './../models/tutorial.model'

// Section 2
export const ADD_TUTORIAL       = '[TUTORIAL] Add'
export const REMOVE_TUTORIAL    = '[TUTORIAL] Remove'

// Section 3
export class AddTutorial implements Action {
    readonly type = ADD_TUTORIAL

    constructor(public payload: Tutorial) {}
}

export class RemoveTutorial implements Action {
    readonly type = REMOVE_TUTORIAL

    constructor(public payload: number) {}
}

// Section 4
export type Actions = AddTutorial | RemoveTutorial

Seciton 1

Here, we're simply importing our Tutorial model and Action from ngrx/store. This makse sense, being that we're working with actions.

Section 2

We're defining the type of action, which is in the form of a string constant.

Section 3

We're creating a class for each action with a constructor that allows us to pass in the payload. This isn't a required step, but it does provide you with strong typing.

Section 4

We're exporting all of our action classes for use within our upcoming reducer.

Creating a Reducer

Now that we have a model and our actions, we need to create a reducer. A reducer is what takes the incoming action and decides what to do with it.

It takes the previous state and returns a new state based on the given action.

import { Action } from '@ngrx/store'
import { Tutorial } from './../models/tutorial.model'
import * as TutorialActions from './../actions/tutorial.actions'

// Section 1
const initialState: Tutorial = {
    name: 'Initial Tutorial',
    url: 'http://google.com'
}

// Section 2
export function reducer(state: Tutorial[] = [initialState], action: TutorialActions.Actions) {

    // Section 3
    switch(action.type) {
        case TutorialActions.ADD_TUTORIAL:
            return [...state, action.payload];
        default:
            return state;
    }
}

Section 1

Here, we're defining an initial or default state. This isn't required if you don't want to define a state right out of the box.

Section 2

This is our actual reducer. It takes in a state, which we're defining as a Tutorial type and we've optionally bound it to initialState. It also takes in the action from our /actions/tutorial.actions file.

Section 3

First, we use a switch to determine the type of action. In the case of adding a tutorial, we return the new state with the help of our newState() function.

We're simply passing in the previous state in the first parameter, and then our action in the second.

In the event that the action.type does not match any cases, it will simply return the state, as provided in the first parameter of our reducer.

Creating an App State

import { Tutorial } from './models/tutorial.model';

export interface AppState {
  readonly tutorial: Tutorial[];
}

in module.ts

import { StoreModule } from '@ngrx/store';
import { reducer } from './reducers/tutorial.reducer';

@NgModule({
  // Other code removed for brevity
  imports: [
    BrowserModule,
    StoreModule.forRoot({
      tutorial: reducer
    })
  ],

Getting data from Store

in component.ts

 // Section 1
  tutorials: Observable<Tutorial[]>;

  // Section 2
  constructor(private store: Store<AppState>) { 
    this.tutorials = store.select('tutorial');
  }

Section 1

We're defining an observable named tutorials which we will later display in the template.

Section 2

We're accessing the store from ngrx within the constructor, and then selecting tutorial which is defined as a the property from app.module.ts in StoreModule.forRoot({}).

This calls the tutorial reducer and returns the tutorial state.

writing to data store

``` constructor(private store: Store) {}

addTutorial(name, url) { this.store.dispatch(new TutorialActions.AddTutorial({name: name, url: url}) ) } ```

Reference Links

State Management in Angular with @ngrx

ngrx

@ngrx/effects