co-IT.eu GmbH We Empower Outstanding Business Solutions Angular at Scale – @ngrx @GregOnNet 

co-IT.eu GmbH We Empower Outstanding Business Solutions “ Please feel free to ask anything at any time. @GregOnNet 

AGENDA What are we going to discuss? 1. The WHY, HOW & WHAT of State Management 2. Getting to know the Redux Architecture 3. @ngrx features that help us to survive in enterprise projects 

No content

WHY, HOW & WHAT OF STATE MANAGEMENT What do we have to deal with? 1. Bad code increases 2. Less features are published in certain period of time 3. Confusion due different approaches compose components 

WHY, HOW & WHAT OF STATE MANAGEMENT What is done here? 1. Cyclometic Complexity of 8 2. Nested code blocks 3. Mix Domain & Infrastructure 4. No Tests 

WHY, HOW & WHAT OF STATE MANAGEMENT Component Composition Simple Dialog material.angular.io 

WHY, HOW & WHAT OF STATE MANAGEMENT The Component Monolith ModalWrapper Modal Stepper Question ButtonGroup Just 5 Files away to know how the component works… 

WHY, HOW & WHAT OF STATE MANAGEMENT Monoliths Increase Research Time 1. No clear API 2. Deeply nested Components 3. Hard for others to understand 

WHY, HOW & WHAT OF STATE MANAGEMENT How do we get there? 1. Not enough experience applying software patterns 2. No clue over the whole project 3. Requirements change over time 

WHY, HOW & WHAT OF STATE MANAGEMENT Think in APIs 1. Provide easy to use APIs 2. Reduce Component Nesting 3. Put a smile on your colleague‘s face 

WHY, HOW & WHAT OF STATE MANAGEMENT Think in Smart & Dumb Components Provide composition boundaries between UI concerns. “ 

WHY, HOW & WHAT OF STATE MANAGEMENT Dumb Components @Input @Output Container 1. Present Data 2. Handle UI Logic 3. Being reusable Building Blocks 4. No dependency to a data service 

WHY, HOW & WHAT OF STATE MANAGEMENT Smart Components 1. Orchestrate Components 2. Provide Data from APIs 3. Made for a certain use case Receive Call Container HTTP/WS Redux 

WHY, HOW & WHAT OF STATE MANAGEMENT Why do we need to care about State Management Patterns? 1. Communicate effectively through deeply nested component tree 2. Publish consistent amount of features over time 3. Built more trust in code base 4. Deliver a product having a great user experience 

REDUX ARCHITECTURE Centralize State Management Store Component SELECT INTERACT 

REDUX ARCHITECTURE Five Types Of Application State Data Communication Control Session Location 5 Types of Application State jamesknelson.com/5-types-react-application-state 

REDUX ARCHITECTURE Flow Type Payload Action State Store Dispatch action to Store Reducer Current state & Action Properties Component in App Some component action (e.g. button clicked) Initial state received Update on Store change event Store change event triggered 

REDUX ARCHITECTURE How do we communicate between a Component and a Store? { type: 'Unique Type‘, payload: { use: 'data‘, we: 'need‘, to: 'mutate‘, application: 'state‘ } } … an Action 

REDUX ARCHITECTURE How do we process state mutations? export function reducer(currentState, action) { switch(action.type) { case 'Unique Type‘: return { ...currentState, application: action.payload.application }; } } … with a Reducer 

REDUX ARCHITECTURE How do we process state mutations? export function reducer(currentState, action) { switch(action.payload) { case 'Unique Type‘: return { ...currentState, application: action.payload.application }; } } Create a new Slice 

REDUX ARCHITECTURE Unidirectional Data Flow simplified ACTION STATE COMPONENT STORE Dispatch Send To Mutate Render Inspired by @ToddMotto REDUCERS 

REDUX ARCHITECTURE Unidirectional Data Flow simplified ACTION REDUCERS STATE COMPONENT Inspired by @ToddMotto 

REDUX ARCHITECTURE Side Effects click input click Action Action Action Component Async Effect Success Action Error Action change Start Action Store change event triggered 

No content

Run Through Drift Along With Redux 

NGRX What Are We Going To See? 1. How the Store is setup 2. How a Component dispatches an Action 3. How an Action is built 4. How a Reducer processes an Action export function reducer(state = initialState, action: CraftWarshipActions): Slice { switch (action.type) { case CraftWarshipActionTypes.ChooseWarshipPlanSuccess: case CraftWarshipActionTypes.RecoverWarshipPlanSuccess: return { ...state, current: action.payload }; default: return state; } } 

Selectors A QUERY API FOR VIEWS 

QUERY API FOR VIEWS Selectors 1. Provide a query API for views 2. Simplify Reducers 3. Memoization 

A QUERY API FOR REDUX Selectors Instrumentint Memoization Pattern 1 selector calculate 3 selector recalculate Store change event triggered 2 selector cache 

A QUERY API FOR REDUX Use Selectors import {createFeatureSelector, createSelector } from '@ngrx/store'; export const feature = createFeatureSelector('harbour‘); export const selector = createSelector(feature, slice => slice.); reuse 

A QUERY API FOR REDUX Combine Selectors export const customers = createSelector(customerSlice, slice => /* */); export const orders = createSelector(ordersSlice, slice => /* */); export const customerOrders = createSelector( customers, orders, (customers, orders) => /* */ ); 

Time Travel Debugging Analyse Life-Lifecycle 

NGRX Time Travel Debugging github.com/GregOnNet/ngx-battleships.git 

Lazy Loading Loading Reducers as needed 

NGRX Load Features Lazily https://github.com/ng-practice/ngrx-aware 

Redux is a Team Sport 

CLOSING THOUGHTS Redux Is More Than Just An Architecture. 1. It is a comitment made by the whole developer team. 2. It guides you through the process of modeling application state. 3. It opens a new world analyzing your app. TEAM REQUIREMENTS TOOLING 

BUSINESS SOLUTIONS Need help? Twitter Workshops Projects workshops.co-IT.eu contact.co-IT.eu @GregOnNet 

co-IT.eu GmbH We Empower Outstanding Business Solutions Thank you! @GregOnNet