Architecture

UI = f ( State )

Reducer Function

    export function counterReducer(state: number = 0, action: Action): number {
      let newState = state;
      switch (action.type) {
        case INCREMENT:
          newState = state + 1;
    
        case DECREMENT:
          newState = state - 1;
    
        case RESET:
          newState = 0;
      }
      return newState;
    }
                    

Store - Tree Of Reducers

HTTP Request (XHR)

ngrx

Reactive State for Angular

“RxJS powered state management for Angular applications, inspired by Redux”

State is a single, immutable data structure.

    export interface AppState {
      name: string;
      age: number;
      showDropdown: boolean;
      isUserLoggedIn: boolean;
    }
              

State accessed with the Store, an observable of state and an observer of actions.

    export class FlightComponent {
      showSpinner$ = this.store.select(state => state.isLoading);
    
      constructor(private store: Store<AppState>) {}
    
      onInput(flightId: string) {
        this.store.dispatch(FlightAction.loadFlight({flightId}));
      }
    }
              

Actions describe state changes.

                      this.store.dispatch(
                          FlightAction.loadFlight({flightId: '4711ABC'})
                      );
              

                      this.store.dispatch(
                          FlightAction.loadFlightSuccess({flight: loadedFlight})
                      );
              

                      this.store.dispatch(
                          FlightAction.loadFlightError({error: loadingError})
                      );
              

Pure functions called reducers take the previous state and the next action to compute the new state.

      const flightReducer = createReducer(
        initialState,
        on(FlightAction.loadFlight, 
          (state: FlightState, { flightId }) => 
            ({ ...state, isLoading: true })
        ),
        on(FlightAction.loadFlightSuccess, 
          (state: FlightState, { flight: loadedFlight }) => 
            ({ ...state, 
              error: null,
              isLoading: false,
              flight: loadedFlight })
        ),
        on(FlightAction.loadFlightError...));
              

Best practice

Checkout dumb vs smart components

State goes down

... using Angular @Input syntax.

Events go up

... using Angular @Output syntax.

Summary

• Reactive Architecture
  
  • UI is a function of state
  • Reducer: state + action -> new state
  • Effect handles async tasks
• NGRX
  
  • Selector returns part of state as observable
  • Components or services dispatch actions
• dumb vs smart components

Live Code Examples & Backup slides below

Live Code Examples

• Simple Counter Example
• Try out Redux Devtools with Book Collection (Angular ngrx store) Example
• Book Collection Code on Github

Backup slides

Following slides are not subject of the lecture.
Ask trainers in case of questions.

Scaling MVC Applications

• Debugging?
• Testing?
• Understanding?
• Server Side Rendering?

http://onehungrymind.com/build-better-angular-2-application-redux-ngrx/

Which Libraries To Know?

React

Flux

Redux

ngrx

Websockets Push

Websockets Pull

Forget Everything And Go Reactive?

Abstraction is the tradeoff which is not always worth it.

• For small applications it's simply overkill.
• Lack of know how.
• Use it when you need it.