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

Adding Redux With NgRx/store and Angular2 – Part 1

  • /youtube-videos’;// Echoes Statelet EchoesStore = {  videos: []}; export default compose()({ videos });

    In order to attach this store to the app, i’m importing it in the app.module.ts (i’m using the excellent Angular2Class angular2 starter kit) as other imports were removed for this exampleimport { Store, StoreModule } from ‘@ngrx/store’;import { store } from ‘.

  • Notice how the “videos” function is a pure function: it gets 2 arguments and is expected to return a { ActionReducer, Action } from ‘@ngrx/store’; export const ADD = ‘ADD’;export const REMOVE = ‘REMOVE’;export const RESET = ‘RESET’; export interface EchoesVideos extends const videos: = (state: EchoesVideos = [], action: Action) = {     switch (action.type) {        case ADD:            return addVideos(state, action.payload);         case REMOVE:            return state;         case RESET:            return state;    }} export function addVideos(state: EchoesVideos, videos: {    return main (and currently only) action that is implemented here is the “add” action with addVideos function.
  • /core/store’;import { Observable } from selector: ‘youtube-videos’, template: changeDetection: class YoutubeVideos { videos$: youtubeSearch: YoutubeSearch, public store: Storeany) { this.videos$ = = code}

    I also imported the “ChangeDetectionStrategy”, so I can instruct angular to evaluate changes once.

  • Since this operation is async, the template of youtube-videos component has been defined with a pipe of
      =”videos$ | async” Store in Angular2 Service
      The real action of dispatching action to the store comes from the service.
    • map((res: Response) = = = { let itemsAmount = = type: ADD, payload: [ …response.items ] }) return closes a circle and invokes the “videos” reducer mentioned above, which afterwards updates the youtube-videos components, which in turn, displays the current state of the “store.videos” property.

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