<!DOCTYPE html>
<html>
<head>
<title>@ngrx introduction - Projecting State for View with combineLatest and withLatestFrom</title>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="https://npmcdn.com/es6-shim@0.35.0/es6-shim.min.js"></script>
<script src="https://npmcdn.com/zone.js@0.6.12?main=browser"></script>
<script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
<script src="https://npmcdn.com/systemjs@0.19.27/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
console.clear();
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<app></app>
</body>
</html>
.attending{
color: green;
}
.margin-bottom-10{
margin-bottom: 10px;
}
### @ngrx/store Introduction - Projecting State for View with combineLatest and withLatestFrom
import {Component, ChangeDetectionStrategy} from '@angular/core';
import 'rxjs/Rx'
import {Observable} from 'rxjs/Observable';
import {bootstrap} from '@angular/platform-browser-dynamic';
import {Store, provideStore} from '@ngrx/store';
import {id} from './id';
import {people} from './people';
import {partyFilter} from './party-filter';
import {
ADD_PERSON,
REMOVE_PERSON,
ADD_GUEST,
REMOVE_GUEST,
TOGGLE_ATTENDING
} from './actions';
import {PersonList} from './person-list';
import {PersonInput} from './person-input';
import {FilterSelect} from './filter-select';
import {PartyStats} from './party-stats';
@Component({
selector: 'app',
template: `
<h3>@ngrx/store Party Planner</h3>
<party-stats
[invited]="(model | async)?.total"
[attending]="(model | async)?.attending"
[guests]="(model | async)?.guests"
>
{{guests | async | json}}
</party-stats>
<filter-select
(updateFilter)="updateFilter($event)"
>
</filter-select>
<person-input
(addPerson)="addPerson($event)"
>
</person-input>
<person-list
[people]="(model | async)?.people"
(addGuest)="addGuest($event)"
(removeGuest)="removeGuest($event)"
(removePerson)="removePerson($event)"
(toggleAttending)="toggleAttending($event)"
>
</person-list>
`,
directives: [PersonList, PersonInput, FilterSelect, PartyStats]
})
export class App {
public model;
constructor(
private _store: Store
){
/*
Every time people or partyFilter emits, pass the latest
value from each into supplied function. We can then calculate
and output statistics.
*/
this.model = Observable.combineLatest(
_store.select('people')
_store.select('partyFilter'),
(people, filter) => {
return {
total: people.length,
people: people.filter(filter),
attending: people.filter(person => person.attending).length,
guests: people.reduce((acc, curr) => acc + curr.guests, 0)
}
});
}
//all state-changing actions get dispatched to and handled by reducers
addPerson(name){
this._store.dispatch({type: ADD_PERSON, payload: {id: id(), name})
}
addGuest(id){
this._store.dispatch({type: ADD_GUEST, payload: id});
}
removeGuest(id){
this._store.dispatch({type: REMOVE_GUEST, payload: id});
}
removePerson(id){
this._store.dispatch({type: REMOVE_PERSON, payload: id});
}
toggleAttending(id){
this._store.dispatch({type: TOGGLE_ATTENDING, payload: id})
}
updateFilter(filter){
this._store.dispatch({type: filter})
}
//ngOnDestroy to unsubscribe is no longer necessary
}
bootstrap(App, [
provideStore({people, partyFilter})
]);
import {
ADD_PERSON,
REMOVE_PERSON,
ADD_GUEST,
REMOVE_GUEST,
TOGGLE_ATTENDING
} from './actions';
const details = (state, action) => {
switch(action.type){
case ADD_GUEST:
if(state.id === action.payload){
return Object.assign({}, state, {guests: state.guests + 1});
}
return state;
case REMOVE_GUEST:
if(state.id === action.payload){
return Object.assign({}, state, {guests: state.guests - 1});
}
return state;
case TOGGLE_ATTENDING:
if(state.id === action.payload){
return Object.assign({}, state, {attending: !state.attending});
}
return state;
default:
return state;
}
}
//remember to avoid mutation within reducers
export const people = (state = [], action) => {
switch(action.type){
case ADD_PERSON:
return [
...state,
Object.assign({}, {id: action.payload.id, name: action.payload.name, guests:0, attending: false})
];
case REMOVE_PERSON:
return state
.filter(person => person.id !== action.payload);
//to shorten our case statements, delegate detail updates to second private reducer
case ADD_GUEST:
return state.map(person => details(person, action));
case REMOVE_GUEST:
return state.map(person => details(person, action));
case TOGGLE_ATTENDING:
return state.map(person => details(person, action));
//always have default return of previous state when action is not relevant
default:
return state;
}
}
//Person Action Constants
export const ADD_PERSON = 'ADD_PERSON';
export const REMOVE_PERSON = 'REMOVE_PERSON';
export const ADD_GUEST = 'ADD_GUEST';
export const REMOVE_GUEST = 'REMOVE_GUEST';
export const TOGGLE_ATTENDING = 'TOGGLE_ATTENDING';
//Party Filter Constants
export const SHOW_ATTENDING = 'SHOW_ATTENDING';
export const SHOW_ALL = 'SHOW_ALL';
export const SHOW_WITH_GUESTS = 'SHOW_GUESTS';
import {Component, Input, Output, EventEmitter, ChangeDetectionStrategy, Control} from '@angular/core';
@Component({
selector: 'person-list',
template: `
<ul>
<li
*ngFor="let person of people"
[class.attending]="person.attending"
>
{{person.name}} - Guests: {{person.guests}}
<button (click)="addGuest.emit(person.id)">+</button>
<button *ngIf="person.guests" (click)="removeGuest.emit(person.id)">-</button>
Attending?
<input type="checkbox" [checked]="person.attending" (change)="toggleAttending.emit(person.id)" />
<button (click)="removePerson.emit(person.id)">Delete</button>
</li>
</ul>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
/*
with 'onpush' change detection, components which rely solely on
input can skip change detection until those input references change,
this can supply a significant performance boost
*/
export class PersonList {
/*
"dumb" components do nothing but display data based on input and
emit relevant events back up for parent, or "container" components to handle
*/
@Input() people;
@Output() addGuest = new EventEmitter();
@Output() removeGuest = new EventEmitter();
@Output() removePerson = new EventEmitter();
@Output() toggleAttending = new EventEmitter();
}
import {Component, Output, EventEmitter} from '@angular/core';
@Component({
selector: 'person-input',
template: `
<input #personName type="text" />
<button (click)="add(personName)">Add Person</button>
`
})
export class PersonInput {
@Output() addPerson = new EventEmitter();
add(personInput){
this.addPerson.emit(personInput.value);
personInput.value = '';
}
}
import {
SHOW_ATTENDING,
SHOW_ALL,
SHOW_WITH_GUESTS
} from './actions';
//return appropriate function depending on selected filter
export const partyFilter = (state = person => person, action) => {
switch(action.type){
case SHOW_ATTENDING:
return person => person.attending;
case SHOW_ALL:
return person => person;
case SHOW_WITH_GUESTS:
return person => person.guests;
default:
return state;
}
};
import {Component, Output, EventEmitter} from "@angular/core";
import {
SHOW_ATTENDING,
SHOW_ALL,
SHOW_WITH_GUESTS
} from './actions';
@Component({
selector: 'filter-select',
template: `
<div class="margin-bottom-10">
<select #selectList (change)="updateFilter.emit(selectList.value)">
<option *ngFor="#filter of filters" value="{{filter.action}}">
{{filter.friendly}}
</option>
</select>
</div>
`
})
export class FilterSelect {
public filters = [
{friendly: "All", action: SHOW_ALL},
{friendly: "Attending", action: SHOW_ATTENDING},
{friendly: "Attending w/ Guests", action: SHOW_WITH_GUESTS}
];
@Output() updateFilter : EventEmitter<string> = new EventEmitter<string>();
}
import {Component, Input, Output, EventEmitter, ChangeDetectionStrategy} from '@angular/core';
@Component({
selector: 'party-stats',
template: `
<strong>Invited:</strong> {{invited}}
<strong>Attending:</strong> {{attending}}
<strong>Guests:</strong> {{guests}}
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class PartyStats {
@Input() invited;
@Input() attending;
@Input() guests;
}
let start = Math.floor(Math.random() * (5000);
//fake id starting at random number
export const id = () => {
return ++start;
};
/**
* PLUNKER VERSION (based on systemjs.config.js in angular.io)
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function(global) {
var ngVer = '@2.0.0-rc.1'; // lock in the angular package version; do not let it float to current!
//map tells the System loader where to look for things
var map = {
'app': 'src',
'@angular': 'https://npmcdn.com/@angular', // sufficient if we didn't pin the version
'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api', // get latest
'@ngrx/store': 'https://npmcdn.com/@ngrx/store@2.0.0',
'@ngrx/effects': 'https://npmcdn.com/@ngrx/effects@1.0.1',
'@ngrx/core': 'https://npmcdn.com/@ngrx/core@1.0.0',
'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6',
'ts': 'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js',
'typescript': 'https://npmcdn.com/typescript@1.8.10/lib/typescript.js',
};
//packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.ts', defaultExtension: 'ts' },
'rxjs': { main: 'index.js', defaultExtension: 'js' },
'@ngrx/store': { main:'index.js', defaultExtension: 'js' },
'@ngrx/effects': { main: 'index.js', defaultExtension: 'js' },
'@ngrx/core': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
// Add map entries for each angular package
// only because we're pinning the version with `ngVer`.
ngPackageNames.forEach(function(pkgName) {
map['@angular/'+pkgName] = 'https://npmcdn.com/@angular/' + pkgName + ngVer;
});
// Add package entries for angular packages
ngPackageNames.forEach(function(pkgName) {
// Bundled (~40 requests):
packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
// Individual files (~300 requests):
//packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
},
map: map,
packages: packages
}
System.config(config);
})(this);