Evan Schultz - Angular Summit - 2016

Evan Schultz
Developer @Rangleio
Some rights reserved - Creative Commons 2.0 by-sa
BUILDING ANGULAR 2
APPLICATIONS
WITH REDUX

A Typical Complex SPA
• Lots of parts.
• Everything is connected to everything else.
• Changing anything breaks something somewhere.
• Managing state becomes a challenge.

How State Really Becomes Painful
Component Model
Model
Model
Model
Component
Component
Component

Best Solutions Known as of Now
• Component-based UI.
• Unidirectional data-ﬂow.
• A “stateless” approach deeper in the stack.

Why Stateless is Good
• A lot of us were raised on OOP. Objects are stateful.
• The eﬀect of calling a method depends on the arguments and
the object’s state.
• Very painful to test.
• Very hard to understand.
• Aims to mimic the real world.
• But why replicate the unnecessary complexity?

Alternative: Pure Functions
• The output of a pure function depends only on inputs.
• Pure functions have no side-eﬀects.
• Pure functions have no state.
• Much easier to understand.
• Much easier to test.

Unidirectional Data Flow with Flux
Component
Store
API, etc.
Component
Dispatcher
Action(s)Action 
Creator

Redux is a predictable state
container for JavaScript apps.
– @dan_ambrov
“

Redux Resources
• GitHub: https://github.com/reactjs/redux
• Docs: http://redux.js.org/
• Ecosystem: https://github.com/xgrommx/awesome-redux
• Training: https://egghead.io/courses/getting-started-with-redux

Redux Key Concepts
• Application State is a single object in a single store.
• Only way to change state is by emitting an Action.
• Actions describe what happened.
• State is transformed by reducers that handle actions.

Reducer Functions
• Basic reduce():
function sum (value, state) {
return state + value;
}
[1,2,3,4,5].reduce(sum, 0);
• Running through the items:
1: 0 => 1
2: 1 => 3
3: 3 => 6
4: 6 => 10
5: 10 => 15

Action Reducers in Redux
• Take an action and a state, return a new state.
• Your app’s state is a reduction over the actions.
• Each reducer operates on a subset of the global state.
• Simple reducers are combined into complex ones.

An Example
export const cats = (state: ICats = INITIAL_STATE, action) => {
switch (action.type) {
case CAT_DELETED:
return state.filter(n => n.id !== action.payload.id);
case CAT_CREATED:
return [...state, action.payload];
case CAT_UPDATED:
return state.map(n => {
return n.id !== action.payload.id ? n :
Object.assign({}, n, action.payload); });
default:
return state;
}
};

Testing Is Easy
describe('the cats reducer', () => {
it('should allow cats to be created', () => {
const initialState = cats([]);
const expectedState = [/* ... */];
const action = {
type:’CAT_CREATED',
payload: { /* ... */ }
};
const nextState = todos(initialState, action);
expect(nextState).to.deep.equal(expectedState);
});
});

Why Is This a Good Idea?
• Reducers are pure functions – easy to understand, easy to test.
• Reducers are synchronous.
• Data logic is 100% separated from view logic.
• You can still have modularity by combining reducers.
• New opportunities for tools.

Actions
• Information you send from your application to your store.
• The only source of change to your state.
• Represent what was done
• Simply JSON Objects with a ‘type’ property

Example Action
let action = {
type: ‘FULL_NAME_FORMED’,
payload: {
fullName: 'Evan Schultz'
}
}

Action Creators
• Functions that return actions.
• Can handle business logic
• Can handle API Calls and Async behaviour.
• Takes parameters and creates an Action
• Components should …
• Know what data to pass in.
• Not care about the structure of the payload.

ActionCreator / Action
let formFullName = (firstName, lastName) => {
return {
type: ‘FULL_NAME_FORMED’,
payload: {
fullName: `${firstName} ${lastName}`
}
}
}

Putting it together …
• Action Creators are the request to do something.
• Actions are the result of what happened.
• Reducers transform to represent what happened.

How Do We Avoid Mutating State?
• Reducers are supposed to not change the old state. But how do
we keep them honest?
• Immutable data structures store data without introducing
“state”.
• Object.freeze() - shallow.
• “Seamless Immutable”: frozen all the way down.
• But what happens when you want to modify your data?

Derived Immutables
• You can’t change immutable objects. But you need to.
• So, you derive new ones. I.e., make a new immutable that is
diﬀerent in a speciﬁed way, without altering the original.
• “Immutable.JS” is one library to use.
var newData = data.setIn(
['foo', 'bar', 'baz'],
42
);

Derived Immutables
• These are key building blocks for stateless architecture.
• ES6 Spread Syntax return [...state, action.payload];
• Object.assign return Object.assign({}, n, action.payload);

Change Detection
• Angular 2 has OnPush change detection.
• Only ﬁres when reference to an Input changes.
• Do not need to do property by property checking.
• If used properly, can improve the performance of your
application.

ng2-redux
• Angular 2 bindings for Redux.
• https://github.com/angular-redux/ng2-redux
• Expose state as an Observable.
• Property Decorators
• DevTools
• Compatible with existing Redux ecosystem.
• https://github.com/xgrommx/awesome-redux

Angular 2 + ng2-redux Setup
• Creating the Store - Root Reducer & Reducer Composition.
• Root Module Conﬁguration.
• Component Architecture.
• Accessing State.
• Action Services.
• Middleware and DevTools.

Root Reducer
• Redux has a Global Application State.
• Root Reducer combines reducers into your Application State.
• Slices of state are handled by a reducer.
• Each Reducer can focus on a small area of concern.

Create Root Reducer
import { combineReducers } from 'redux';
import { cats, ICat } from './cats';
import { catEdit, ICatEdit } from './cat-edit';
import { codeTables, ICodeTables } from './code-tables';
import { filters, IFilters } from './filters';
export interface IAppState {
cats?: ICat[];
catEdit?: ICatEdit;
codeTables?: ICodeTables;
filters?: IFilters;
};
export const rootReducer = combineReducers<IAppState>
({ cats, catEdit, codeTables, filters });

Resulting State …
resultingState = {
"cats": [{ "age": "senior", "breed": "munchkin", "description": "...",
/* .... */
}],
"catEdit": { "isEditing": false, "currentCat": null, "isPending": false
},
"codeTables": {
"ages": [{ "value": "senior", "label": "Senior" }],
"breeds": [{ "value": "munchkin", "label": "Munchkin"}]
"genders": [/* ...*/ ]
},
"filters": {
"age": {},
"breed": {},
"gender": {}
},
"catsLoading": false
}

Reducer Composition
export const rootReducer =
combineReducers<IAppState>
({
cats,
catEdit,
codeTables,
filters,
catsLoading
});
• Keep reducers small and
simple.
• Focus on one area.
• Compose as needed.
• Responsible for Data
Management.

Combine Reducers
combineReducers<IAppState>({
});
cats,
catEdit,
codeTables,
filters,
catsLoading
Manages adding and removal of cats

Combine Reducers
});
cats,
catEdit,
codeTables,
filters,
catsLoading
Manages the currently edited cat

Combine Reducers
});
cats,
catEdit,
codeTables,
filters,
catsLoading
Manages list tables like
•Breeds
•Age
•Gender

Combine Reducers
});
cats,
catEdit,
codeTables,
filters,
catsLoading
Manages what ﬁlters are applied

Combine Reducers
});
cats,
catEdit,
codeTables,
filters,
catsLoading
Is the cats list loading?

Nested CombineReducers
});
import { ages } from './ages.reducer';
import { breeds } from './breeds.reducer';
import { genders } from './genders.reducer';
import { combineReducers } from 'redux';
export const codeTables = combineReducers({ages, breeds, genders});
app/store/code-tables/code-tables.reducer.ts
codeTables,

Higher Order Reducers
});
filters,
const filterReducer = (property, INITIAL_STATE = {}) =>
(state = INITIAL_STATE, action) => {
/* .... */
case FilterActions.FILTER_ADDED:
return Object.assign({}, state, { [action.payload.value]: true });
/* ... */
default:
return state;
}};
app/store/ﬁlters/ﬁlters.reducer.ts

Higher Order Reducers
});
filters,
export const filters = combineReducers({
age: filterReducer('age'),
breed: filterReducer('breed'),
gender: filterReducer('gender')
});
app/store/ﬁlters/ﬁlters.reducer.ts

Can be really … really small
});
export const catsLoading = (state = false, action) => {
case CatsActions.CATS_LOADING:
return true;
case CatsActions.CATS_LOADED:
return false;
default:
return state;
}};
app/store/cats/cats-loading.reducer.ts
catsLoading

• Can be built in many ways.
• Can be nested.
• Can be combined.
• Can be composed.
• Can be reusable.
Reducers …

Angular 2 - Root Module
import { NgReduxModule, NgRedux } from 'ng2-redux';
import { rootReducer, IAppState } from './store';
@NgModule({
declarations: [ AppComponent ],
imports: [ NgReduxModule ],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
constructor(private ngRedux: NgRedux<IAppState>) {
ngRedux.configureStore(rootReducer, {});
}
}

Angular 2 - Bootstrap
import './polyfills.ts';
import { platformBrowserDynamic } from '@angular/platform-
browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

Angular 2 - Component
export class AppComponent implements OnInit {
@select() cats$: Observable<ICat[]>;
constructor(private ngRedux:NgRedux<IAppState>) { }
createCat(catDetails) {
this.ngRedux.dispatch({type: 'CREAT_CAT',
payload: catDetails
});
}
}

• Also referred to as Smart or Stateful Components
• Knows about State and how to access it
• Responsible for …
• Getting the data from the state
• Passing down data
• Dispatching actions
Component Types - Container

/* Access State */
constructor(private catsActions: CatsActions) { }
/* Dispatch Actions */
displayCat(cat) { this.ngRedux.dispatch({}); }
/* ActionService of CatActions deals with Dispatch */
submitCat(catModel) { this.catsActions.submitCat(catModel); }
}
Container Component

<md-grid-tile *ngFor="let cat of filteredCats$ | async">

<app-cat-detail-card
[cat]="cat"
(displayEdit)="displayCat($event);"
(deleteCat)="deleteCat($event)">
</app-cat-detail-card>
</md-grid-tile>
Container Component

<div class="sm-col sm-col-4”>
<b>All Cats</b>

<app-cat-short-list
[cats]="cats$"
[breeds]="catBreeds$">
</app-cat-short-list>
</div>
<div class="sm-col sm-col-4”>
<b>Filtered Cats</b>

<app-cat-short-list
[cats]="filteredCats$"
[breeds]="catBreeds$">
</app-cat-short-list>
</div>
Container Component

• Also referred to as Dumb or Stateless Components
• Receives data from containers
• Emits events up to parent
• Do not rely on external state that is not provided
• Do not modify external state
Presentation Component

• Receives data from container or smart component.
@Input() cat: ICat;
• Emits events up to the parent
@Output() deleteCat: EventEmitter<ICat> = new EventEmitter();
• Responsible for …
• Rendering data.
• Emitting events.

@Component({
selector: ‘ ',
templateUrl: './cat-detail-card.component.html',
styleUrls: ['./cat-detail-card.component.scss']
})
export class CatDetailCardComponent {
@Input() cat: any;
@Output() displayEdit: EventEmitter<string> = /* ... */
@Output() deleteCat: EventEmitter<any> = /* ... */
}
app-cat-detail-card

Presentation Template
<md-card>
<md-card-title-group>
<md-card-subtitle>{{cat.headline}}</md-card-subtitle>
<md-card-title>{{cat.name}}</md-card-title>
<img md-card-sm-image [src]="cat.imageUrl" />
</md-card-title-group>
<md-card-content>
<div [innerHtml]="cat.description"></div>
</md-card-content>
<md-card-actions>
<button md-button (click)="displayEdit.emit(cat)">EDIT</button>
<button md-button (click)="deleteCat.emit(cat)">DELETE</button>
</md-card-actions>
</md-card>
app-cat-detail-card

Accessing State
• Can access underlying Redux methods.
• getState - snapshot of current state.
• subscribe - callback for every state change.
• Can use ngRedux `select` slices of state as an Observable.
• @select() cats$: Observable<ICat[]>;
• this.cats$ = ngRedux.select(state=>cats);

Accessing State - @select
export class AppComponent {
@select(['codeTables', 'breeds']) catBreeds$;
@select(['codeTables', 'ages']) catAges$;
@select((state)=>state.codeTables.genders) catGenders$;
}

ActionServices
• Injectable Angular 2 Classes.
• Access to Angular DI.
• Dispatch from the service.
• Class methods are similar to Action Creators.

ActionServices
• Actions still pass through middleware.
• Call dispatch from the service.
• Action is still a JSON object that gets passed into your reducers

Angular 2 - Synchronous Actions
@Injectable()
export class CatsActions {
static CAT_CREATED = 'CAT_CREATED';
constructor(private ngRedux: NgRedux<IAppState>) { };
createCat = ({name, headline, /* … snip … */ }) => {
const randomImage = randomRange(100, 200);
const imageUrl = /* … snip … */
const id = generateId();
const cat = { name, headline,/* … snip … */}
this.ngRedux
.dispatch({ type: CatsActions.CAT_CREATED, payload: cat });
};

Asyncronous Actions
• Call an action creator to initiate a request.
• Action creator emits an action to inform everyone that a
request was made.
• Action creator emits an action to inform everyone that a
request was completed. (Or when it fails.)
• Push details of making a request into a module.

Angular 2 - Async Actions
listAll = () => {
this.ngRedux.dispatch({type: 'CATS_LOADING' }))
return this.cats
.listAll()
.subscribe(result => {
this.ngRedux.dispatch({
type: 'CATS_LOADED',
payload: result
});
},
(err) => this.ngRedux.dispatch({type: 'CATS_LOADING_ERROR'})
);
};

Observable State
Remember this?
Its an RxJs Observable
map ﬁltermergeMap
debounceTime groupBycombineLatest
…. and more
combine with other streams

Can use | async
<app-cat-edit-form
[cat]="catEdit$ | async"
[catBreeds]="catBreeds$ | async"
[catAges]="catAges$ | async"
[catGenders]="catGenders$ | async"
*ngIf="isEditing$ | async"
(submitCat)="submitCat($event)">
</app-cat-edit-form>
@select(['catEdit', 'currentCat']) catEdit$: Observable<any>;
@select(['codeTables', 'genders']) catGenders$;
}
Async pipe can handle subscriptions and dispose for you

Combining Streams
@select() filters$;
public filteredCats$;
ngOnInit() {
this.filteredCats$ = this.cats$
.combineLatest(this.filters$.map(activeFilters),
(cats, filters: any) => cats.filter(filters));
}

Transform State
• Functions passed into select are called every state change
• Transformations should happen only 
when the state you care about has changed

Transform State
let greeter = p => `Hello ${p.firstName} ${p.lastName}`
@select(state=>greeter(state.people)) greetings$: Observable<string[]>;
greetings: string[]
}
greeter gets executed every state change!

Transform State
let greeter = p => `Hello ${p.firstName} ${p.lastName}`
@select() people$: Observable<IPerson[]>;
greetings$: Observable<string[]>
ngOnInit() {
this.greetings$ = this.people$
.map(greeter)
}
}
greeter gets executed only if people$ changes

Selectors
(*) or how to decouple state structure from
components

Reducer: “How does my state change over time”?
: “How do other modules make sense of
my state?”
- @dan_abramov
“
Selectors

• Containers can be smart, but not too smart.
• Risk tightly coupling components to the shape of your state.
• Can make refactoring diﬃcult.
Selectors

Selectors - Selecting State
export class Comp2 {
@select([‘path','to','expenses'])
expenses$:Observable<IExpenses[]>
}
• Changes in state can lead to updating multiple locations.
• Brittle, error prone.
• Makes refactoring risky.
@select([‘path','to','expenses'])
expenses$:Observable<IExpenses[]>
}

Selectors - Selecting State
import { expenses } from './store';
@select(expenses) expenses$:any
}
import { expenses } from './store';
@select(expenses) expenses$:any
}
• Create a shared selector.
// colocated with the reducer
export const expenses = ['new','expense','path']
• Import and use.

Selectors - Transforming State
• Shape of state may not meet view needs.
• Can transform state.
• Can be used to derive data from existing state.
• Want to keep code DRY.
• Minimize logic in components.

export expenses = ['path','to','expenses'];
export const approvedTotal = (expenses) => {
return expenses
.filter( n=> n.approved)
.reduce((acc,curExpense) => acc + curExpense.total,0)
}

import { approvedTotal, expenses } from './store';
@Component({ /* ... */ })
export class ExpenseComponent {
total$:Observable<string>
ngOnInit() {
this.total$ = this.ngRedux
.select(expenses)
.map(approvedTotal)
}
}

• See all actions dispatched.
• See state before action.
• See state after action.
Logger Middleware

Logger - Setup
const createLogger = require('redux-logger');
const logger = createLogger({level:'info', collapse: true })
export const middleware = [logger];
app/store/store.ts
import { rootReducer, IAppState, middleware } from './store';
@NgModule({/* ....*/ })
constructor(private ngRedux: NgRedux<IAppState>) {
ngRedux.configureStore(rootReducer, {}, [...middleware] );
}
}
app/app.module.ts

• Works with Redux Dev Tools.
• Available in Chrome Store - [Link].
• Action history.
• Time traveling.
• State Import & Export.
Redux Dev Tools

DevTools - Setup
import { NgReduxModule,
NgRedux,
DevToolsExtension } from 'ng2-redux';
@NgModule({/* ...*/ })
constructor(private ngRedux: NgRedux<IAppState>,
devTools: DevToolsExtension) {
let enhancers = devTools.isEnabled() ?
[ devTools.enhancer() ] : [];
ngRedux.configureStore(rootReducer,
{ },
[...middleware],
[...enhancers]);
}
}
app/app.module.ts

Evan Schultz - Angular Summit - 2016

• Observe an Action stream as Observable.
• Handle complex workﬂows.
• Cancellable.
• Simplify action creators.
Middleware - redux-observable

• Focus on business / data logic.
• No longer concerned with coordinating async streams.
• Can begin to behave synchronously again.
Action Creators

• Focus on Async behaviour.
• Handling side eﬀects.
• Take Actions in.
• Emit Actions out.
Epics

Create Cat - Epic
@Injectable()
export class CatEpics {
/* ... */
create = (action$: ActionsObservable<IPayloadAction>) => {
let dispatch = this.dispatch;
let errorHandler = createErrorHandler(CatsActions.CAT_CREATE_ERROR);
let catCreated = createSuccessHandler(CatsActions.CAT_CREATED);
let createCat = ({payload}) => this.cats.create(payload)
.map(result => catCreated(result))
.catch(err => errorHandler(err));
return action$.ofType(CatsActions.CREATE_CAT)
.do(n => dispatch({ type: CatsActions.CREATING_CAT }))
.mergeMap(n => createCat(n));
}
}

Create Cat - Register Epic
import { rootReducer, IAppState, middleware, CatEpics } from './store';
import { createEpicMiddleware } from 'redux-observable';
constructor(private ngRedux: NgRedux<IAppState>,
devTools: DevToolsExtension,
catEpics: CatEpics) {
const createCatEpic = createEpicMiddleware(catEpics.create);
const updateCatEpic = createEpicMiddleware(catEpics.update);
let enhancers = devTools.isEnabled() ? [ devTools.enhancer() ] : [];
ngRedux.configureStore(rootReducer,
{},
[...middleware, createCatEpic, updateCatEpic],
[...enhancers]);
}
}

Create Cat - Action Creator
createCat = ({name, headline, description, age, gender, breed}) => {
const imageUrl = `https://placekitten.com/${randomImage}/${randomImage}`;
this.ngRedux.dispatch({type: CatsActions.CREATING_CAT});
this.cats.create({ /* .... */ })
.subscribe(result => this.ngRedux.dispatch({
type: CatsActions.CAT_CREATED,
payload: result })
,
err => this.ngRedux.dispatch({
type: CatsActions.CAT_CREATE_ERROR,
payload: err})
);
};
Before

Create Cat - Action Creator
createCat = ({name, headline, description, age, gender, breed}) => {
const imageUrl = `https://placekitten.com/${randomImage}/${randomImage}`;
this.ngRedux.dispatch({
type: CatsActions.CREATE_CAT,
payload: {
/* .... */
}
});
After

Demo
• Summit Cat Shelter
• https://github.com/e-schultz/ng-summit-2016-shelter

Caveats
• Its addictive.
• You won’t be happy using anything else.
• Your friends might not understand your obsession.

THANK YOU!
Evan Schultz
@e_p82
e-schultz
Developer, rangle.io

Evan Schultz - Angular Summit - 2016

More Related Content

What's hot (20)

Viewers also liked (16)

Similar to Evan Schultz - Angular Summit - 2016 (20)

Evan Schultz - Angular Summit - 2016