ivankisyov

1. Identify feature: "Messages"
2. Define state: { messages: Message[], selectedMessage: Message }
3. Define actions: LoadMessages, LoadMessagesSuccess, LoadMessagesError, SelectMessage
4. Define reducers:
   function messagesReducer(state, action) {
     switch(action.type) {
       case LoadMessagesSuccess: return { ...state, messages: action.payload };
       case SelectMessage: return { ...state, selectedMessage: action.payload };
       default: return state;
     }

ivankisyov

NGRX Testing Principles

Testing reducer:

• pass state and action and expect on the result

Testing selector:

• use projector method of a selector and pass some stubbed state to it and expect on the result

Testing effects:

ivankisyov

App build with state management in mind

1. Define the interfaces
2. Define the overall state
3. Define the actions

ivankisyov

import {Observable} from 'rxjs';
import {tap} from 'rxjs/operators';

// original source:
// https://github.com/angular-university/rxjs-course/blob/master/src/app/common/debug.ts

export enum RxJsLoggingLevel {
    TRACE,
    DEBUG,
    INFO,

ivankisyov

clean code

• small functions - 10 lines max
• proper naming
• single responsibility

jasmine - test framework

karma - test runner

ivankisyov

Helpers

A list of helper software that makes my life easier

• clipx

ivankisyov

[Angular] Reactive forms

Simple reactive form example

export class YourComponent implements OnInit {
  myReactiveForm = new FormGroup({
    username: new FormControl("", Validators.required),
    password: new FormControl("", Validators.required)
  });

ivankisyov

RxJS Operators

• catch - dealing with errors

delete(id) {
  return this.http.delete(this.url + '/' + id)
          .catch(this.handlerError)
}

• toPromise - use promise instead of observable(the observable is converted to a promise)

ivankisyov

Errors

Types of errors

• unexpected
  • server offline
  • unhandled exceptions
  • network is down
• expected
  • 400 - Bad Request
• 404 - Not Found

ivankisyov

class Point {
    // fields _x, _y
  constructor(private _x: number, private _y: number) {}

  // property x
  get x() {
    console.log(this._x);
    return this._x;
 }