Enterprise State Management with NGRX/platform

Tue, 22 Oct | 1:30 PM – 2:20 PM
Alpha Room
Iliya Idakiev 
NGRX – Predictable Reactive State
Management Enterprise Angular Apps

A B O U T M E
{
"name": "Iliya Idakiev",
"experience": [
"Google Developer Expert (Angular/Web)",
"Developer & Co-founder @ HILLGRAND.com”,
"Lecturer in 'Advanced JS' @ Sofia University",
"Contractor / Consultant",
"Public / Private Courses"
],
"involvedIn": [
"Angular Sofia", "SofiaJS / BeerJS",
]
}
!

NGRX/PLATFORM
STATE MANAGEMENT FOR ENTERPRISE ANGULAR APPS

▸ State Management Problems.
▸ Observables vs Promises (Intro to RxJS).
▸ NGRX/Platform Overview.
▸ Creating a simple app using ngrx/store and ngrx/effects (v.8+).
▸ NGRX and State Management @ hillgrand.com
STATE MANAGEMENT FOR ENTERPRISE ANGULAR APPLICATIONS
WHAT TO EXPECT

COMPONENT - SERVICE COMMUNICATION
Component
Class View
Class
Service (API)

Component
Class View
MULTI COMPONENT - SERVICE COMMUNICATION
Class
Service (API)
Component
Class View

WHERE SHOULD WE STORE STATE?

▸ Only inside the components.

▸ Only inside the api services.

▸ In both the components and the api services.

▸ The Single Responsibility Principle — Classes should have a single responsibility
and thus only a single reason to change.
▸ The Open/Closed Principle — Classes and other entities should be open for
extension but closed for modiﬁcation.
▸ The Liskov Substitution Principle — Objects should be replaceable by their subtypes
▸ The Interface Segregation Principle — Interfaces should be client speciﬁc rather
than general.
▸ The Dependency Inversion Principle — Depend on abstractions rather than
concretions.
SOLID PRINCIPLES OF OBJECT-ORIENTED DESIGN

▸ In both the components and the api services.
▸ Inside one or more store/state services.

REDUX PATTERN
Component Action Reducer
Store

REDUX PATTERN WITH SELECTORS
Component Action Reducer
StoreSelector

▸ Uniﬁed way of handling state management.
▸ Single source of truth.
▸ Predictable state transitions due to the pure reducer functions.
▸ Easier to debug
BENEFITS

▸ Framework for building reactive applications in Angular.
▸ NgRx provides:
▸ State management
▸ Isolation of side effects
▸ Entity collection management
▸ Router bindings
▸ Developer tools that enhance developers experience
NGRX / PLATFORM

NGRX / PLATFORM

NGRX / PLATFORM REDUX

NGRX / PLATFORM EFFECTS

REACTIVE
Reacting to events or situations rather than acting first
to change or prevent something.

▸ RxJS is a library for reactive programming using
Observables, to make it easier to compose
asynchronous or callback-based code.
RXJS

IS IT SOMETHING LIKE
PROMISES?

Promise.resolve(10).then(x => x + 100).then(x => '' + x); // > Promise { value: '110' }
PROMISE CHAIN

▸ A state machine with three states - Unfulﬁlled / Resolved / Rejected.
▸ A Promise is a proxy for a value not necessarily known when the promise
is created.
▸ It allows you to associate handlers with an asynchronous action's
eventual success value or failure reason. (using .then / .catch)
▸ This lets asynchronous methods return values like synchronous methods:
instead of immediately returning the ﬁnal value, the asynchronous
method returns a promise to supply the value at some point in the future.
PROMISES

Promise.resolve(10).then(x => Promise.resolve(x + 100)).then(x => '' + x);
// > Promise { value: '110' }
PROMISE FLATTENING

import 'rxjs/add/observable/of';
import 'rxjs/add/operator/map';
of(10).map(x => x + 100).map(x => '' + x).subscribe(console.log);
OBSERVABLES

of(10).map(x => x + 100).map(x => '' + x).subscribe(console.log);
OBSERVABLES
Start the stream

const sub = of(10).map(x => x + 100).map(x => '' + x).subscribe(console.log);
sub.unsubscribe();
OBSERVABLES

2.OBSERVABLES ARE
CANCELLABLE.

import { of } from 'rxjs';
import { map } from 'rxjs/operators';
of(10).pipe(map(x => x + 100), map(x => '' + x)).subscribe(console.log);
OBSERVABLES WITH PIPEABLE OPERATORS (1)

import { from } from 'rxjs';
const stream$ = from([1, 2, 3, 4]).pipe(map(x => x + 1));
stream$.subscribe(console.log)
// > 2
// > 3
// > 4
// > 5
MULTI VALUE OBSERVABLE (1)

// > 2
// > 3
// > 4
// > 5

3.OBSERVABLES CAN EMIT
MULTIPLE VALUES.

3.1. DIFFERENT WAYS OF
EMITTING VALUES. 
(COLD / HOT OBSERVABLES)

4.OBSERVABLES CAN BE CREATED
USING DIFFERENT CREATOR
FUNCTIONS.

5.BETTER FLOW CONTROL.  
(BY UNITISING THE LARGE MOUNT OF OPERATORS PROVIDED BY THE LIBRARY
OR CREATING OUR OWN OPERATORS)

6.CONTROLLING TIME.  
(BY USING THE DIFFERENT SCHEDULERS PROVIDED BY THE LIBRARY)

// > 2
// > 3
// > 4
// > 5
CONTROLLING TIME (1)

import { from, asyncScheduler } from 'rxjs';
const stream$ = from([1, 2, 3, 4], asyncScheduler).pipe(map(x => x + 1));
// > 2 (async)
// > 3 (async)
// > 4 (async)
// > 5 (async)
CONTROLLING TIME (2)

THE APPLICATION

import { createAction } from '@ngrx/store';
CREATING ACTIONS
NGRX/store v.8

export const loadUsers = createAction(
);
CREATING ACTIONS

'[USER LIST] Load Users'
);
CREATING ACTIONS

);
CREATING ACTIONS
Namespace

import { actionType } from 'src/app/shared/action-type';
);
CREATING ACTIONS

actionType('[USER LIST] Load Users')
);
CREATING ACTIONS

);
export const loadUsersSuccess = createAction(
actionType('[USER LIST] Load Users Success'),
);
CREATING ACTIONS

import { IUser } from 'src/app/shared/interfaces/user';
);
  (users: IUser[]) => ({ payload: { users } })
);
CREATING ACTIONS

);
);
export const loadUsersFailure = createAction(
  actionType('[USER LIST] Load Users Failure'),
  (error: Error) => ({ payload: { error } })
);
CREATING ACTIONS

export interface IUserListState { }

CREATING THE USER LIST REDUCER

import { IUser } from 'src/app/shared/interfaces';
export interface IUserListState { isLoaded: boolean; users: IUser[]; }


const initialState: IUserListState = { isLoaded: false, users: null };


export const reducer =

import { createReducer } from '@ngrx/store';
export const reducer = createReducer<IUserListState>(

);
NGRX/store v.8

import { createReducer } from '@ngrx/store';
initialState,

);

import { createReducer, on } from '@ngrx/store';
import { loadUsers } from '../actions/list';
  initialState,
  on(loadUsers, ),

);
NGRX/store v.8

  initialState,
  on(loadUsers, state => ),

);

  initialState,
  on(loadUsers, state => ({ ...state, isLoaded: false })),

);

import { loadUsers, loadUsersSuccess } from '../actions/list';
  initialState,
  on(loadUsersSuccess, ( ) =>
     )
);

  initialState,
  on(loadUsersSuccess, (state, { payload: { users } }) =>
     )
);

  initialState,
     )
);
Automatic type detection

  initialState,
    ({ ...state, users, isLoaded: true }))
);

export const moduleReducerName = 'user';
CREATING THE USER MODULE REDUCER

export interface IUserState {
}

import { IUserListState } from './list';
readonly list: IUserListState;
}

import { ActionReducerMap } from '@ngrx/store';
}
export const reducers: ActionReducerMap<IUserState> = {
};

import { reducer as listReducer } from '../reducers/list';
}
list: listReducer
};

import { reducer as listReducer } from '../reducers/list';
}
list: listReducer
};
Feature State Name

@NgModule({
  declarations: [
…
  ],
  imports: [
…
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
CONFIGURING THE STORE

import { StoreModule } from ‘@ngrx/store';
@NgModule({
  declarations: [
…
  ],
  imports: [
…
  ],
  providers: [],
})

import { StoreModule } from ‘@ngrx/store';
@NgModule({
  declarations: [
…
  ],
  imports: [
…
    StoreModule.forRoot( ),
  ],
  providers: [],
})

import { StoreModule } from '@ngrx/store';
@NgModule({
  declarations: [
…
  ],
  imports: [
…
    StoreModule.forRoot({}),
  ],
  providers: [],
})

@NgModule({
  declarations: […],
  imports: [
…
    StoreModule.forFeature(moduleReducerName, reducers)
  ]
})
export class UserModule { }
CONFIGURING THE FEATURE STORE

@NgModule({
  imports: [
…
    StoreModule.forFeature(moduleReducerName, reducers)
  ]
})
CONFIGURING THE FEATURE STORE
Feature State Name (‘user’)

THE APP STATE

THE APP STATE
Feature State Name (‘user’)

import { IUserListState } from '../reducers/list';
CREATING OUR FEATURE SELECTORS

export const getIsLoaded = (state: IUserListState) => state.isLoaded;
export const getUsers = (state: IUserListState) => state.users;

const getUserModule =

import { createFeatureSelector } from '@ngrx/store';
import { moduleReducerName, IUserState } from '../reducers';
createFeatureSelector<IUserState>(moduleReducerName);

import { createFeatureSelector } from '@ngrx/store';
const getUserListState = ;

import { createFeatureSelector, createSelector } from '@ngrx/store';
const getUserListState = createSelector( , );

const getUserListState = createSelector(getUserModule, );

const getUserListState = createSelector(getUserModule, s => s.list);

export const getUserListStateIsLoaded =
export const getUserListStateUsers =

createSelector( );
createSelector( );

createSelector(getUserListState );
createSelector(getUserListState );

createSelector(getUserListState, getIsLoaded);
createSelector(getUserListState, getUsers);

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss']
})
export class ListComponent {
  constructor( ) { }
}
USING OUR SELECTORS

import { Store } from '@ngrx/store';
import { IAppState } from 'src/app/+store';
     
@Component({
})
  constructor(private store: Store<IAppState>) { }
}
USING OUR SELECTORS

import {
  getUserListStateUsers,
} from '../+store/selectors';     
@Component({
})
  users$ = this.store.select(getUserListStateUsers);
}
USING OUR SELECTORS

import {
  getUserListStateUsers,
  getUserListStateIsLoaded
} from '../+store/selectors';     
@Component({
})
  users$ = this.store.select(getUserListStateUsers);
  isLoaded$ = this.store.select(getUserListStateIsLoaded);
}
USING OUR SELECTORS

CREATING OUR FEATURE EFFECTS
import { Injectable } from '@angular/core';
import { Actions } from '@ngrx/effects';
@Injectable()
export class UserListEffects {





  constructor(private actions$: Actions ) { }
}

@Injectable()
  loadUsers$ =




}

import { createEffect, Actions } from '@ngrx/effects';
@Injectable()
  loadUsers$ = createEffect(



   );
}

import { createEffect, Actions } from '@ngrx/effects';
@Injectable()
  loadUsers$ = createEffect(() => this.actions$.pipe(



   );
}

import { createEffect, Actions, ofType } from '@ngrx/effects';
@Injectable()
    ofType(loadUsers),



   );
}

import { switchMap } from 'rxjs/operators';
@Injectable()
    ofType(loadUsers),
    switchMap(


  ));
}

@Injectable()
    ofType(loadUsers),
    switchMap(() =>


  ));
}
We will be returning an observable so
we need to ﬂatten it to get the value

import { UserService } from '../../user.service';
@Injectable()
    ofType(loadUsers),
    switchMap(() => this.userService.loadUsers()


  ));
  constructor(private actions$: Actions, private userService: UserService) { }
}

@Injectable()
    ofType(loadUsers),
    switchMap(() => this.userService.loadUsers().pipe(

    )
  ));
}

import { loadUsersSuccess, loadUsers } from '../actions/list';
import { switchMap, map } from 'rxjs/operators';
@Injectable()
    ofType(loadUsers),
      map( ),
    )
  ));
}

import { switchMap, map } from 'rxjs/operators';
@Injectable()
    ofType(loadUsers),
      map(users => loadUsersSuccess(users)),
    )
  ));
}

import { switchMap, map, catchError } from 'rxjs/operators';
@Injectable()
    ofType(loadUsers),
      catchError( ))
    )
  ));
}

import { loadUsersSuccess, loadUsersFailure, loadUsers } from '../actions/list';
import { switchMap, map, catchError } from 'rxjs/operators';
@Injectable()
    ofType(loadUsers),
      catchError(error => [loadUsersFailure(error)]))
    )
  ));
}

import { EffectsModule } from '@ngrx/effects';
@NgModule({
  declarations: [
…
  ],
  imports: [
…
    EffectsModule.forRoot([]),
  ],
  providers: [],
})
REGISTERING OUR ROOT EFFECTS

import { EffectsModule } from '@ngrx/effects';
@NgModule({
  imports: [
…
    EffectsModule.forFeature([UserListEffects])
  ]
})
REGISTERING OUR FEATURE EFFECTS

▸ Listens for one or multiple actions and returns an action.
▸ Listens for one or multiple actions and returns nothing.
▸ Listens for one or multiple actions and returns multiple actions.
TYPES OF EFFECT STREAMS

▸ @ngrx/store - state management.
▸ @ngrx/store-devtools - developer tools and instrumentation.
▸ @ngrx/effects - side effect isolation.
▸ @ngrx/router-store - Angular router bindings.
▸ @ngrx/entity - adapter for managing record collections.
▸ @ngrx/data - extension that simpliﬁes management of entity data.
▸ @ngrx/schematics - scaffolding module for ngrx.
NGRX / PLATFORM

);
);
export const loadUsersFailure = createAction(
  actionType('[USER LIST] Load Users Failure'),
  (error: Error) => ({ payload: { error } })
);
REDUCING CODE BY EXTRACTING COMMON LOGIC INTO FACTORIES

NGRX / PLATFORM @ HILLGRAND.COM
MODELS

import { Component, OnInit } from '@angular/core';
import { ListModel } from ‘./+store/models/list.ts';
  
@Component({
})
export class ListComponent implements OnInit {
  users$ = this.model.users$;
  isLoaded$ = this.model.isLoaded$;
  constructor(private model: ListModel) { }
ngOnInit() { this.model.loadUsers(); }
}
REDUCING CODE AND SHARING STATE DERIVATIONS BY USING MODELS

THE APPLICATION STORE STRUCTURE

import { Injectable } from ‘@angular/core';
  
@Injectable()
export class SomeModel {
…
saveSuccess$ = this.actions$.pipe(
ofType(saveSuccess), mapTo(true)
);
constructor(private actions$: Actions, private store: Store) { }
}
REDUCING STATE BY CREATING ACTION LISTENERS
Action Listeners

META REDUCERS
We can think of meta-reducers as hooks into the action->reducer pipeline.
Meta-reducers allow us to pre-process actions before normal reducers are
invoked.
export function logoutStateCleaner(reducer) {
  return function (state: State, action: Action) {
    return reducer(action.type === logoutSuccess.type ? {
      router: state.router,
      // more things that you want to persist after logout
    } : state, action);
  };
}

NGRX-STORE-FREEZE IN DEVELOPMENT MODE

REDUCING STATE BY USING QUERY PARAMS
https://github.com/IliaIdakiev/
query-param-store

GitHub > https://github.com/iliaidakiev (/slides/ - list of future and past events)
Twitter > @ilia_idakiev
CONNECT
Colour palette and background image + ngrx architecture image were taken from https://ngrx.io

Session
Feedback Your Time & Opinion is Valued 
https://www.telerik.com/devreach/day1feedback

Enterprise State Management with NGRX/platform

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Enterprise State Management with NGRX/platform

Ähnlich wie Enterprise State Management with NGRX/platform (20)

Mehr von Ilia Idakiev

Mehr von Ilia Idakiev (13)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Enterprise State Management with NGRX/platform