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

Angular 2, Ngrx/Store & Ngrx/Effects – Intro To Functional Approach For A Chain Of Actions

  • handling the “Queue” event was implemented with this code in the “queueSelectedVideo” “imports” omitted to focus on the relevant code for this example@Component({  selector: class YoutubeVideos implements OnInit {  videos$: youtubeSearch: YoutubeSearch,    private nowPlaylistService: NowPlaylistService,    private store: StoreEchoesState,    public youtubePlayer: YoutubePlayerService  ) {    this.videos$ = store.select(state = = store.select(state = (media: = (media: {    return “queueSelectedVideo” function calls the queueVideo function on the nowPlaylistService.
  • service.ts// imports omitted @Injectable()export class NowPlaylistService { public playlist$: store: Storeany, private youtubeVideosInfo: YoutubeVideosInfo ) { this.playlist$ = this.store.select(state = (mediaId: string) { return = {        this.store.dispatch({ type: QUEUE, payload: response.items[0] });        return code is simple and works great.
  • With our case, we can say that the queue video action eventually modifies the state of now-playlist, has a side effect of initiating an api call to a service and then, upon response (success or error) and will initiate another action.
  • There are no logics or ajax resolving imports omitted for this post@Component({  selector: class YoutubeVideos implements OnInit {  videos$: youtubeSearch: YoutubeSearch,    private nowPlaylistService: NowPlaylistService,    private store: StoreEchoesState,    private nowPlaylistActions: NowPlaylistActions,    private playerActions: PlayerActions,    public youtubePlayer: YoutubePlayerService  ) {    this.videos$ = store.select(state = = store.select(state = (media: This dispatch an action as (media: focus on the new flow of “queueSelectedVideo”.
  • In my opinion, the code is almost a simple story from which I can understand a chain of reactions:

    when the action QUEUE_LOAD_VIDEO (the new queue video) has been dispatched
    take the payload and pass it on to the next operation
    use api to fetch more data on the relevant video and return a new observable so it can subscribed to:

    if response returned successfully – dispatch the final action as queue video.



Angular (2+), Ngrx/Store & Ngrx/Effects – Intro To Functional Approach For A Chain Of Actions – Oren Farhi – Javascript & Angular (2, 4) Consulting Network, Angular Developer


https://twitter.com/intent/tweet?in_reply_to=890577337368154112
https://twitter.com/intent/retweet?tweet_id=890577337368154112
https://twitter.com/intent/favorite?tweet_id=890577337368154112


https://twitter.com/intent/tweet?in_reply_to=880431749993517056
https://twitter.com/intent/retweet?tweet_id=880431749993517056
https://twitter.com/intent/favorite?tweet_id=880431749993517056


http://twitter.com/search?q=%23Angular
http://twitter.com/search?q=%23ngrx


https://twitter.com/i/web/status/868707270338785280
https://twitter.com/intent/tweet?in_reply_to=868707270338785280
https://twitter.com/intent/retweet?tweet_id=868707270338785280
https://twitter.com/intent/favorite?tweet_id=868707270338785280


http://twitter.com/search?q=%23angular
http://twitter.com/search?q=%23rxjs
https://twitter.com/intent/tweet?in_reply_to=859743262713708546
https://twitter.com/intent/retweet?tweet_id=859743262713708546
https://twitter.com/intent/favorite?tweet_id=859743262713708546


https://twitter.com/intent/tweet?in_reply_to=859079914548604929
https://twitter.com/intent/retweet?tweet_id=859079914548604929
https://twitter.com/intent/favorite?tweet_id=859079914548604929

Comments are closed, but trackbacks and pingbacks are open.