Search code examples
angularngrxngrx-router-store

How to access router-store params on effect?


I have an effect that I need to pass an ID that I get from my URL.

I have a root store that has my router-store, and I have another store that I use for my component, to load some data.

1. How can I access the URL params from my router-store inside my effect?

2. Is it possible from my component effect to access the data from the root store?

3. Right now I have 24322 hard code and I need to get that from my root store. Should I get it on my effect or is it better to pass it on the payload?*

Here is the code for my component effect

import { Injectable } from '@angular/core';

import { Effect, Actions, ofType } from '@ngrx/effects';
import { of } from 'rxjs';
import { map, switchMap, catchError } from 'rxjs/operators';

import * as fromRoot from '../../../store';
import * as topicActions from '../actions/topic.actions';
import { PostsService } from '../../../service/posts.service';

// need to connect with roter store
@Injectable()
export class TopicEffects {

    @Effect()
    loadTopic$ = this.actions$
        .pipe(
            ofType(topicActions.LOAD_TOPIC),
            switchMap(() => {
                return this.postService.getTopicHeader(24322).pipe(
                    map(topic => new topicActions.LoadTopicSuccess(topic)),
                    catchError(error => of(new topicActions.LoadTopicFail(error)))
                );
            })
        );

    constructor(private readonly actions$: Actions, private readonly postService: PostsService) {}

}

Solution

  • To access a value from your store, you can inject your store in your TopicEffects then use withLatestFrom operator. https://www.learnrxjs.io/operators/combination/withlatestfrom.html.

    It will look like something like this:

    @Effect()
    loadTopic$ = this.actions$
    .pipe(
        ofType(topicActions.LOAD_TOPIC),
        withLatestFrom(this.routerStore.pipe(select(selectSomeValue)))
        switchMap(([action, valueFromStore]) => {
            return this.postService.getTopicHeader(valueFromStore).pipe(
                map(topic => new topicActions.LoadTopicSuccess(topic)),
                catchError(error => of(new topicActions.LoadTopicFail(error)))
            );
        })
    );
    

    Is that answering your question?