co-IT.eu GmbH We Empower Outstanding Business Solutions www.co-IT.eu NgRx Refactoring Patterns @GregOnNet 

Apple Pie 

What is the better place to bake …? 

No content

No content

No content

NgRx is a luxurious kitchen but
 we must keep it clean. 

@GregOnNet Speaker & Developer Gregor Woiwode 

RECAP Redux Architecture ACTION STATE COMPONENT STORE Dispatch Send To Mutate Render Inspired by @ToddMotto REDUCERS 

github.com/GregOnNet/keep.git 

− Simplify Case Reducers − Automate reducer creation − Systematize state mutation operations − Isolate Store structure − Automate communication infrastructure AGENDA We will learn how to… 

export function reducer(slice = defaults, action: NotesActions): NotesSlice { switch (action.type) { case NotesActionTypes.LoadNotesSuccess: return { !!...slice, entities: action.payload }; case NotesActionTypes.CreateNoteSuccess: return { !!...slice, entities: [!!...slice.entities, action.payload] }; case NotesActionTypes.UpdateNoteSuccess: return { !!...slice, entities: slice.entities.map(note => note.guid !!=== action.payload.guid ? action.payload : note ) REDUCERS Does this look clean to you? 

SIMPLIFY CASE REDUCERS The Case Reducer case NotesActionTypes.LoadNotesSuccess: return { !!...slice, entities: action.payload }; 

1Set mutation logic in meaningful context.
 

SIMPLIFY CASE REDUCERS Extract Case Reducer case NotesActionTypes.LoadNotesSuccess: return setNotes(action.payload, slice); !// … function setNotes(notes: Note[], slice: NotesSlice): NotesSlice { return { ...slice, entities: notes }; } 

Easier to read Function micro management SIMPLIFY CASE REDUCERS Review + - 

2 Reduce code that is pure infrastructure. 

AUTOMATE REDUCER CREATION Switch-Case-Anatomy Infrastructure UI-Logic case: a case: b case: … 

AUTOMATE REDUCER CREATION Create Reducer Pattern createReducer Infrastructure UI-Logic Type Case Reducer Pass to 

AUTOMATE REDUCER CREATION Create Reducer Pattern const handlers: ActionHandlers = { [NotesActionTypes.LoadNotesSuccess]: setNotes, [NotesActionTypes.UpdateNoteSuccess]: updateNote, [NotesActionTypes.CreateNoteSuccess]: createNote }; export function reducer(slice = defaults, action: NotesActions): NotesSlice { return createReducer(handlers)(slice, action); } 

3 Reuse mutation logic. 

Entity State export interface State extends EntityState {} export interface State { ids: string[]; entities: { [id: string]: T }; } Leverages Property Pattern SYSTEMATIZE STATE MUTATION OPERATIONS 

Entity Adapter import { createEntityAdapter } from '@ngrx/entity'; 
 const adapter = createEntityAdapter(); The mighty helper SYSTEMATIZE STATE MUTATION OPERATIONS 

Entity Mutators Operations for single objects and collections SYSTEMATIZE STATE MUTATION OPERATIONS 

Simplify Mutations return adapter.removeOne( action.payload, state ); const { [action.payload.guid]: deleted, ...withoutDeleted } = state.notes; return { ...state, notes: withoutDeleted, } 1. Ensures Immutability 2. Applies State Mutation SYSTEMATIZE STATE MUTATION OPERATIONS 

Entity Selectors const adapter = createEntityAdapter(); export const { selectAll, selectEntities, selectIds, selectTotal } = adapter.getSelectors(); SYSTEMATIZE STATE MUTATION OPERATIONS 

Use Entity Selectors export class NotesDashboardComponent { notes$: Observable; 
 constructor(private store: Store) { this.notes$ = this.store.pipe(select(fromNotes.selectAll)); } } SYSTEMATIZE STATE MUTATION OPERATIONS 

Less Function micro management Code is better to read Changes in Store are needed Review + + - SYSTEMATIZE STATE MUTATION OPERATIONS 

SYSTEMATIZE STATE MUTATION OPERATIONS Changes in the Store may break your components this.notes$ = this._store.pipe( select(s => s.notes.board.entities.filter( note => new RegExp(s.search.query, 'i').test(note.title) || new RegExp(s.search.query, 'i').test(note.text) ) ) ); 

4 Isolate Store structure from Components. 

Use Selectors import {createFeatureSelector, createSelector } from '@ngrx/store'; export const feature = createFeatureSelector('notes'); export const selector = createSelector(feature, slice => slice.); reuse ISOLATE STORE 

Combine Selectors export const notes = createSelector(visitNotes, slice => /* */); export const search = createSelector(visitSearch, slice => /* */); export const filteredNotes = createSelector( allNotes, search, (notes, query) => /* */ ); ISOLATE STORE 

Selectors instrument the Memoization Pattern 1 selector calculate 3 selector recalculate Store change event triggered 2 selector cache ISOLATE STORE 

Reduces complexity of components Changes in Store are transparent More decentralized code Review + + - SYSTEMATIZE STATE MUTATION OPERATIONS 

5 Automate communication Infrastructure 

NgRx Ducks 

− Create Action Types − Create Action Creators − Enhance reducer functions − Remember Selector-, Action Type- & Action Creator import paths Stop repetition of the same tasks NGRX DUCKS 

npm install @co-it/ngrx-ducks Hosted at 

@Component({ … }) export class NotesListComponent { notes$: Observable; constructor(@Inject(NoteDucks) private _ducks: Ducks) { this.notes$ = this._ducks.pick(fromNotes.filtered); } addToCollection(draft: NoteDraft) { this._ducks.createNote.dispatch(draft); } } NGRX DUCKS A Duck is a Service 

NGRX DUCKS A Duck are strictly typed 

@Injectable() export class NotesEffects { @Effect() loadNotes$ = this.actions$.pipe( ofType(this._ducks.loadAll.type), exhaustMap(() => this._notes.all()), map(notes => this._ducks.set.plain(notes)) ); } NGRX DUCKS A Duck is a Action Creator 

export class NoteDucks { loadAll = effect('[Notes] Load Notes'); // … set(slice: NotesSlice, notes: Note[]) { return adapter.addAll(notes, slice); } create(slice: NotesSlice, note: Note) { return adapter.addOne(note, slice); } // … } NGRX DUCKS A Duck bundles mutation logic 

import { createReducerFrom, effect, wireUpActions } from '@co-it/ngrx-ducks'; export const wiredActions = wireUpActions(NoteDucks, { set: '[Notes/API] Loading Notes succeeded', create: '[Notes/API] Creating Note succeeded', update: '[Notes/API] Updating Note succeeded' }); NGRX DUCKS A Duck connect mutators with action types 

Review SYSTEMATIZE STATE MUTATION OPERATIONS Read & Write API Single Place to manage actions IoC Support No schematics yet + + + - 

co-IT.eu GmbH We Empower Outstanding Business Solutions Thank you! @GregOnNet github.com/GregOnNet/keep.git 

Special thanks go to… Sascha Nuissl @saschanuissl Creator of the NgRx Ducks Logo ♥ 

co-IT.eu GmbH We Empower Outstanding Business Solutions www.co-IT.eu NgRx Refactoring Patterns @GregOnNet