NgRx Refactoring Patterns

NgRx helps you with centralized state management in Angular.
But what helps to keep your code clean an maintainable as your project grows?

You can choose from various built-in features that NgRx already provides.
But there is even more to discover!

After this talk, you will know about the following patterns and frameworks helping you to scale your NgRx application.

- Property Pattern
- createReducer Factory
- @ngrx/entity
- @ngrx/router-store
- ngrx-data
- ngrx-ducks

Transcript

1. co-IT.eu GmbH We Empower Outstanding Business Solutions www.co-IT.eu NgRx Refactoring Patterns @GregOnNet
2. Apple Pie
3. What is the better place to bake …?
7. NgRx is a luxurious kitchen but
 we must keep it clean.
8. @GregOnNet Speaker & Developer Gregor Woiwode
9. RECAP Redux Architecture ACTION STATE COMPONENT STORE Dispatch Send To Mutate Render Inspired by @ToddMotto REDUCERS
10. github.com/GregOnNet/keep.git
11. − Simplify Case Reducers − Automate reducer creation − Systematize state mutation operations − Isolate Store structure − Automate communication infrastructure AGENDA We will learn how to…
12. 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?
13. SIMPLIFY CASE REDUCERS The Case Reducer case NotesActionTypes.LoadNotesSuccess: return { !!...slice, entities: action.payload };
14. 1Set mutation logic in meaningful context.

15. 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 }; }
16. Easier to read Function micro management SIMPLIFY CASE REDUCERS Review + -
17. 2 Reduce code that is pure infrastructure.
18. AUTOMATE REDUCER CREATION Switch-Case-Anatomy Infrastructure UI-Logic case: a case: b case: …
19. AUTOMATE REDUCER CREATION Create Reducer Pattern createReducer Infrastructure UI-Logic Type Case Reducer Pass to
20. AUTOMATE REDUCER CREATION Create Reducer Pattern const handlers: ActionHandlers<NotesSlice> = { [NotesActionTypes.LoadNotesSuccess]: setNotes, [NotesActionTypes.UpdateNoteSuccess]: updateNote, [NotesActionTypes.CreateNoteSuccess]: createNote }; export function reducer(slice = defaults, action: NotesActions): NotesSlice { return createReducer(handlers)(slice, action); }
21. 3 Reuse mutation logic.
22. Entity State export interface State extends EntityState<Note> {} export interface State<T> { ids: string[]; entities: { [id: string]: T }; } Leverages Property Pattern SYSTEMATIZE STATE MUTATION OPERATIONS
23. Entity Adapter import { createEntityAdapter } from '@ngrx/entity'; 
 const adapter = createEntityAdapter<T>(); The mighty helper SYSTEMATIZE STATE MUTATION OPERATIONS
24. Entity Mutators Operations for single objects and collections SYSTEMATIZE STATE MUTATION OPERATIONS
25. 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
26. Entity Selectors const adapter = createEntityAdapter<T>(); export const { selectAll, selectEntities, selectIds, selectTotal } = adapter.getSelectors(); SYSTEMATIZE STATE MUTATION OPERATIONS
27. Use Entity Selectors export class NotesDashboardComponent { notes$: Observable<Note[]>; 
 constructor(private store: Store<fromNotes.State>) { this.notes$ = this.store.pipe(select(fromNotes.selectAll)); } } SYSTEMATIZE STATE MUTATION OPERATIONS
28. Less Function micro management Code is better to read Changes in Store are needed Review + + - SYSTEMATIZE STATE MUTATION OPERATIONS
29. 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) ) ) );
30. 4 Isolate Store structure from Components.
31. Use Selectors import {createFeatureSelector, createSelector } from '@ngrx/store'; export const feature = createFeatureSelector<HarbourSlice>('notes'); export const selector = createSelector(feature, slice => slice.<property>); reuse ISOLATE STORE
32. Combine Selectors export const notes = createSelector(visitNotes, slice => /* */); export const search = createSelector(visitSearch, slice => /* */); export const filteredNotes = createSelector( allNotes, search, (notes, query) => /* */ ); ISOLATE STORE
33. Selectors instrument the Memoization Pattern 1 selector calculate 3 selector recalculate Store change event triggered 2 selector cache ISOLATE STORE
34. Reduces complexity of components Changes in Store are transparent More decentralized code Review + + - SYSTEMATIZE STATE MUTATION OPERATIONS
35. 5 Automate communication Infrastructure
36. NgRx Ducks
37. − 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
38. npm install @co-it/ngrx-ducks Hosted at
39. @Component({ … }) export class NotesListComponent { notes$: Observable<Note[]>; constructor(@Inject(NoteDucks) private _ducks: Ducks<NoteDucks>) { this.notes$ = this._ducks.pick(fromNotes.filtered); } addToCollection(draft: NoteDraft) { this._ducks.createNote.dispatch(draft); } } NGRX DUCKS A Duck is a Service
40. NGRX DUCKS A Duck are strictly typed
41. @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
42. 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
43. 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
44. Review SYSTEMATIZE STATE MUTATION OPERATIONS Read & Write API Single Place to manage actions IoC Support No schematics yet + + + -
45. co-IT.eu GmbH We Empower Outstanding Business Solutions Thank you! @GregOnNet github.com/GregOnNet/keep.git
46. Special thanks go to… Sascha Nuissl @saschanuissl Creator of the NgRx Ducks Logo ♥
47. co-IT.eu GmbH We Empower Outstanding Business Solutions www.co-IT.eu NgRx Refactoring Patterns @GregOnNet