The document discusses the use of ngrx/store for state management in Angular applications, highlighting its benefits such as predictability, performance optimization, and ease of testing. It presents a use case through an example app called 'echoes player,' showcasing how to manage state with observable stores and reducers. Additionally, it covers components, services, and testing strategies associated with the app's state management.

1. NG2 & NgRx/Store:
Oren Farhi @Orizens

2. hi!
I AM Oren Farhi
Senior Javascript Engineer
Freelance Javascript Consultant & Tutor
You can find me at:
orizens.com
github.com/orizens
@orizens

3. There’s Gotta Be Something Better
Redux for Angular 2 with NgRx/Store

4. - Problems of State Management
- What is NgRx/Store
- Usecase App - Echoes Player
NgRx/Store In Echoes Player Agenda

5. Problems With
State Management

6. The State Of The App?
◦ Where?
◦ Share

7. Current State Of The App
UI ⇔ Model

8. Solution: ngrx/store (benefits)
1. App State is Predictable
2. Separate Logics From UI
3. Optimization in Performance
4. Easy To Test
5. Time Travel (logs)
6. Route & State
7. Promotes Stateless Components

9. Ngrx/Store
State Management Made Easy

10. Example App: Echoes Player - http://echotu.be

11. Store
Mother Of All States

12. Store is an observable “DB”
Store
{ Data }
{ Object }
[ Array ]
number
string
{ Data }
{ Data }
{ Data }

13. Store - json object...
bootstrap(App, [
provideStore({ videos: videosReducer })
]);

14. Reducers - CRUD the Store with Pure Functions (Observable)
const videos = function(state = [], action) => {
switch (action.type) {
case 'ADD_VIDEO':
return state.concat( action.payload );
default:
return state;
}
}

15. Reducers - CRUD the Store with Pure Functions (Observable)
let sum = [1,2,3]
sum.reduce(
(result, value) => result + value,
0
);

16. Action - dispatch an update to State through Reducers
addVideo(media) {
this.store.dispatch({
type: ‘ADD_VIDEO’,
payload: media
});
}

17. Subscribe And Observe - data projection, slice store’s data
@Component({ selector: ‘youtube-player’ })
constructor (store) {
this.player$ = store.select(store => store.player);
this.player$.subscribe(player => {
this.isFullscreen = player.isFullscreen
});
}

18. Subscribe - data projection - listen with Observable
@Component({ selector: ‘youtube-player’ })
constructor (store) {
this.player$ = store.select(store => store.player);
this.player$.subscribe(player => {
this.isFullscreen = player.isFullscreen
});
}

19. Subscribe And Observe - data projection, slice store’s data
let initialPlayerState = {
mediaId: { videoId: 'NONE' },
media: {
snippet: { title: 'No Media Yet' }
},
showPlayer: true,
playerState: 0,
isFullscreen: false
}

20. UI Subscribe - “async” pipe - data projection to view
<section class="player">
<player-controls
[player]="player$ | async"
(action)="handleControlAction($event)"
></player-controls>
</section>
let tempObv = player$.subscribe(player => this.player = player);
tempObv.unsubscribe(); // when view is destroyed

21. One Way Data Flow
Component
Reducer
Store
Action

22. NgRx/Store in Echoes Player
Store & The Youtube Videos Component

23. Store In Echoes Player
export interface EchoesState {
videos: EchoesVideos;
player: YoutubePlayerState;
nowPlaylist: YoutubeMediaPlaylist;
user: UserProfile;
search: PlayerSearch;
}

24. Youtube Videos - SMART Component
<youtube-videos>

25. Youtube Videos - 2 Stateless Components (DUMB)
<youtube-videos>
<youtube-list>
<player-search>

26. Youtube Videos Component (SMART)
@Component({
selector: 'youtube-videos',
directives: [ PlayerSearchComponent, YoutubeList],
template: `
<player-search
[query]="search$ | async"
(change)="resetPageToken()"
(search)="search($event)"
></player-search>
<youtube-list
[list]="videos$ | async"
(play)="playSelectedVideo($event)"
(queue)="queueSelectedVideo($event)"
></youtube-list>`
})
export class YoutubeVideos implements OnInit {}

27. Youtube Videos Component (SMART)
@Component({
selector: 'youtube-videos',
directives: [ PlayerSearchComponent, YoutubeList],
template: `
<player-search
[query]="search$ | async"
(change)="resetPageToken()"
(search)="search($event)"
></player-search>
<youtube-list
[list]="videos$ | async"
(play)="playSelectedVideo($event)"
(queue)="queueSelectedVideo($event)"
></youtube-list>`
})
export class YoutubeVideos implements OnInit {}

28. Performance Boost For Components
@Component({
selector: 'youtube-list',
template: `
<youtube-media
*ngFor="let media of list"
[media]="media"
(play)="playSelectedVideo(media)"
(queue)="queueSelectedVideo(media)"
(add)="addVideo(media)">
</youtube-media>
`,
directives: [NgFor, YoutubeMedia ],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class YoutubeList {
@Input() list: Array<any>;
}

29. Youtube Videos Component (SMART)
@Component({
selector: 'youtube-videos',
directives: [ PlayerSearchComponent, YoutubeList],
template: `
<player-search
[query]="search$ | async"
(change)="resetPageToken()"
(search)="search($event)"
></player-search>
<youtube-list
[list]="videos$ | async"
(play)="playSelectedVideo($event)"
(queue)="queueSelectedVideo($event)"
></youtube-list>`
})
export class YoutubeVideos implements OnInit {}

30. Youtube Videos - Connecting to Store
export class YoutubeVideos implements OnInit {
videos$: Observable<EchoesVideos>;
search$: Observable<PlayerSearch>;
constructor(
private youtubeSearch: YoutubeSearch,
private nowPlaylistService: NowPlaylistService,
private store: Store<EchoesState>,
public youtubePlayer: YoutubePlayerService) {
this.videos$ = store.select(state => state.videos);
this.search$ = store.select(state => state.search);
}
}

31. Youtube Videos - Connecting to Store
export class YoutubeVideos implements OnInit {
videos$: Observable<EchoesVideos>;
search$: Observable<PlayerSearch>;
constructor(
private youtubeSearch: YoutubeSearch,
private nowPlaylistService: NowPlaylistService,
private store: Store<EchoesState>,
public youtubePlayer: YoutubePlayerService) {
this.videos$ = store.select(state => state.videos);
this.search$ = store.select(state => state.search);
}
}

32. Updating the Store
@Component({
selector: 'youtube-videos',
directives: [ PlayerSearchComponent, YoutubeList],
template: `
<player-search
[query]="search$ | async"
(change)="resetPageToken()"
(search)="search($event)"
></player-search>
<youtube-list
[list]="videos$ | async"
(play)="playSelectedVideo($event)"
(queue)="queueSelectedVideo($event)"
></youtube-list>`
})
export class YoutubeVideos implements OnInit {}

33. Youtube Videos Component
Interaction with store services:
- YoutubeSearch
- YoutubePlayer
- NowPlaylist

34. Youtube Videos - Updating The Store
export class YoutubeVideos implements OnInit {
videos$: Observable<EchoesVideos>;
playerSearch$: Observable<PlayerSearch>;
constructor(){ ... }
search (query: string) {
if (query.length) {
this.youtubeSearch.search(query, false);
}
}
queueSelectedVideo (media: GoogleApiYouTubeSearchResource) {
return this.nowPlaylistService.queueVideo(media.id.videoId);
}
}

35. Youtube Videos - Updating The Store
export class YoutubeVideos implements OnInit {
videos$: Observable<EchoesVideos>;
playerSearch$: Observable<PlayerSearch>;
constructor(){ ... }
search (query: string) {
if (query.length) {
this.youtubeSearch.search(query, false);
}
}
queueSelectedVideo (media: GoogleApiYouTubeSearchResource) {
return this.nowPlaylistService.queueVideo(media.id.videoId);
}
}

36. Services - dispatch to Store
@Injectable()
export class NowPlaylistService {
constructor(public store: Store<EchoesState>) {
this.playlist$ = this.store.select(state => state.nowPlaylist);
}
queueVideo (mediaId: string) {
return this.youtubeVideosInfo.api
.list(mediaId).then(response => {
this.store.dispatch({
type: QUEUE, //- const imported from reducer
payload: response.items[0]
});
return response.items[0];
});
}
}

37. NowPlaylist Reducer
let initialState = {
videos: [],
index: '',
filter: ''
}
export const nowPlaylist = (state = initialState, action) => {
switch (action.type) {
case NowPlaylistActions.QUEUE:
return Object.assign(
);
default:
return state;
}

38. NowPlaylist Reducer
let initialState = {
videos: [],
index: '',
filter: ''
}
export const nowPlaylist = (state = initialState, action) => {
switch (action.type) {
case NowPlaylistActions.QUEUE:
return Object.assign({}, state, {
videos: addMedia(state.videos, action.payload)
});
default:
return state;
}

39. Services - dispatch to Store
@Injectable()
export class NowPlaylistService {
constructor(public store: Store<EchoesState>) {
this.playlist$ = this.store.select(state => state.nowPlaylist);
}
queueVideo (mediaId: string) {
return this.youtubeVideosInfo.api
.list(mediaId).then(response => {
this.store.dispatch({
type: QUEUE, //- const imported from reducer
payload: response.items[0]
});
return response.items[0];
});
}
}

40. Ngrx/effects
Side effects of Actions

41. Side Effects for Queue Video
@Injectable()
export class NowPlaylistEffects {
constructor(
store$,
nowPlaylistActions
youtubeVideosInfo
){}
@Effect() queueVideoReady$ = this.store$
.whenAction(NowPlaylistActions.QUEUE_LOAD_VIDEO)
.map<GoogleApiYouTubeSearchResource>(toPayload)
.switchMap(media => this.youtubeVideosInfo.fetchVideoData(media.id.
videoId)
.map(media => this.nowPlaylistActions.queueVideo(media))
.catch(() => Observable.of(this.nowPlaylistActions.queueFailed(media)))
);
}

42. Testing Reducers
Testing now playlist

43. Loading the tested objects
import {
it,
inject,
async,
describe,
expect
} from '@angular/core/testing';
import { nowPlaylist, NowPlaylistActions } from './now-playlist';
import { YoutubeMediaItemsMock } from './mocks/youtube.media.
items';

44. Spec - select a video in now playlist
it('should select the chosen video', () => {
const state = { index: '', videos: [...YoutubeMediaItemsMock], filter: '' };
const actual = nowPlaylist(state, {
type: NowPlaylistActions.SELECT,
payload: YoutubeMediaItemsMock[0]
});
const expected = YoutubeMediaItemsMock[0];
expect(actual.index).toBe(expected.id);
});

45. Spec - set initial state
it('should select the chosen video', () => {
const state = { index: '', videos: [...YoutubeMediaItemsMock], filter: '' };
const actual = nowPlaylist(state, {
type: NowPlaylistActions.SELECT,
payload: YoutubeMediaItemsMock[0]
});
const expected = YoutubeMediaItemsMock[0];
expect(actual.index).toBe(expected.id);
});

46. Spec - select a video in now playlist
it('should select the chosen video', () => {
const state = { index: '', videos: [...YoutubeMediaItemsMock], filter: '' };
const actual = nowPlaylist(state, {
type: NowPlaylistActions.SELECT,
payload: YoutubeMediaItemsMock[0]
});
const expected = YoutubeMediaItemsMock[0];
expect(actual.index).toBe(expected.id);
});

47. Spec - select a video in now playlist
it('should select the chosen video', () => {
const state = { index: '', videos: [...YoutubeMediaItemsMock], filter: '' };
const actual = nowPlaylist(state, {
type: NowPlaylistActions.SELECT,
payload: YoutubeMediaItemsMock[0]
});
const expected = YoutubeMediaItemsMock[0];
expect(actual.index).toBe(expected.id);
});

48. Spec - select a video in now playlist
it('should select the chosen video', () => {
const state = { index: '', videos: [...YoutubeMediaItemsMock], filter: '' };
const actual = nowPlaylist(state, {
type: NowPlaylistActions.SELECT,
payload: YoutubeMediaItemsMock[0]
});
const expected = YoutubeMediaItemsMock[0];
expect(actual.index).toBe(expected.id);
});

49. Ngrx DevTools

50. Ngrx DevTools

51. More NgRx To Explore:
ngrx/router
ngrx/db
...

52. Thanks!
ANY QUESTIONS?
You can find me at
@orizens
oren@orizens.com
http://orizens.com/services
NG2 + Ngrx/Store Workshop:
Register at http://goo.gl/EJmm7q

53. CREDITS
◦ Presentation template by SlidesCarnival
◦ http://orizens.com/wp/topics/adding-redux-with-
ngrxstore-to-angular-2-part-1/
◦ http://orizens.com/wp/topics/adding-redux-with-
ngrxstore-to-angular2-part-2-testing-reducers/
◦ http://orizens.com/wp/topics/angular-2-ngrxstore-
the-ngmodel-in-between-use-case-from-angular-1/
◦ Comprehensive Introduction to NgRx/Store by
btroncone
◦ Reactive Angular With Ngrx/Store by Rob Warmald
◦ https://github.com/ngrx/store
◦