JavaScript Edu Resources. Angular Courses. React Tutorials. Join us!

Adding Redux with NgRx/store to Angular2 – Part 2 (Testing Reducers)

  • At First, I defined the actions for this player’s {Reducer, Action} from ‘@ngrx/store’; export const PLAY = ‘PLAY’;export const QUEUE = ‘REMOVE’;export const TOGGLE_PLAYER = I chose to define the data structure of the player as well as the initial state that I want it to be when the app initialPlayerState = {    mediaId: ‘NONE’,    index: 0,    media: {        snippet: { title: ‘No Media Yet’ }    },    showPlayer: to the previously “videos” reducer (from my last article about ngrx/store), I defined a reducer for the player.
  • All in all, the “player” reducer function can also be tested (which is described later in this const player: Reducerany = (state: Object = initialPlayerState, action: Action) = {     switch (action.type) {        case PLAY:            return playVideo(state, action.payload);         case QUEUE:            return state;         case state;    }} export function playVideo(state: any, media: any) {    return {        mediaId: 0,        media: media,        showPlayer: true    }} export function toggleVisibility(state: any) {    return {        mediaId: state.mediaId,        index: 0,        media: Reducers in Ngrx/store and Angular2
    I’ve written before that I like to write tests.
  • I could check these operations manually inside the browser, but – Testing is fun – someone is doing it for me Youtube Player reducer’, () = {    it(‘should return current state when no valid actions have been made’, () = {        const state = { mediaId: ‘mocked…’ };        const actual = player(state, {type: ‘INVALID_ACTION’, payload: {}});        const expected = set the new media id by the new PLAYED youtube media item’, () = {        const state = { mediaId: ‘mocked’, media: {}};        const actual = player(state, { type: PLAY, payload: YoutubeMediaMock });        const expected = toggle visibility of the player’, () = {        const state = { mediaId: ‘mocked’, showPlayer: false;        const actual = player(state, { type: TOGGLE_PLAYER, payload: true });        const expected = the Reducer To A Component
    Now, we need to use this reducer in Echoes Player.
  • This action lets the player display the title of the currently played { Component, EventEmitter, Input, Output, ChangeDetectionStrategy } from ‘@angular/core’;import { NgModel, NgClass } from ‘@angular/common’import { Observable } from ‘rxjs/Observable’;import { YoutubePlayerService } from ‘youtube-player’, template: [NgModel, NgClass]})export class YoutubePlayer { player: any;  constructor(public playerService: YoutubePlayerService) = this.player = () () { return () () How I use the “subscribe” (this is rxjs method) method in order to register to a change in the player store, which will eventually, will render the media title to the youtube player template.
  • This method (“playVideo”) also dispatches the action “PLAY” and updates the “player” “playVideo()” method in the youtube-player service plays the video through the youtube player api and updates the type: PLAY, payload: media });}

    Using this method, I’m just updating the current state of the player – indicating the media that is playing at the moment.

Adding Redux with NgRx/store to Angular (2+) – Part 2 (Testing Reducers) – Oren Farhi – Javascript & Angular (2, 4) Consulting Network, Angular Developer