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) {}
}
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?