0

I'm writing an angular app in which it initially sets an array of movies into my app state. I do this via a Ngrx action and get the movies through a http request in the relative effect to that action. Then, I use this movies state to render all movies in AppComponent. By using route params, I also made a MovieComponent so when the user clicks on one of the movies in the AppComponent, they'll go the MovieComponent so they can see that movies detail. Now, there's no problem with the redirecting and showing the movie's detail, but when I am in the MovieComponent and refresh the page, the state is lost because it was set in the AppComponent. naturally, I thought of using a route resolver but I don't now how to implement the resolver because the request is handled in the effect.

this is where I set the state in AppComponent ngOnInit :

this.store.select(MoviesSelectors.getHasMovies).pipe(
  take(1),
  switchMap((hasMovies) => {
    return of(this.store.dispatch(new MoviesActions.SetMovies(hasMovies)))
  })
).subscribe()

this is the current effect:

@Effect()
setMovies = this.actions$.pipe(
    ofType(MoviesActions.SET_MOVIES),
    switchMap((action: MoviesActions.SetMovies) =>{
        return of(action.payload).pipe(
            withLatestFrom(this.store.select(MoviesSelectors.getMovies)),
            switchMap(([hasMovies, movies]) => {
                if(hasMovies) {
                    return of(new MoviesActions.SetMoviesSuccess(movies))
                }
                return this.http.get('https://www.fakerestapi.com/datasets/api/v1/movie-details-dataset.json').pipe(
                    map((resData) => {
                        return new MoviesActions.SetMoviesSuccess(resData['data'])
                    }),
                    catchError((errorRes) => {
                        return of(new MoviesActions.SetMoviesFail(errorRes))
                    })
                )
            })
        )
    })
)

What I'm trying ask is that should I move this code in a resolver for MovieComponent route ? is it even a good practice to do so ? is there a better way to implement something like this ?

Thanks

Mister Killuminati
  • 21
  • 5
  • First, don't make requests directly in the effect - call a service method and return the result to your success / fail actions. The resolver would need to dispatch the action to retrieve the movies. Keep in mind that any refresh is going to cause state loss unless you're persisting the state in local or session storage and re-hyrdrating it when your applications starts. – Brandon Taylor Oct 24 '22 at 11:48
  • That's the point. I was looking for a way not to have to save my API data in an storage. Like, API is getting fetched in the AppComponent and when routing to another component, in this case MovieComponent, I get the data from my store which had been set in the AppComponent, but when I refresh the page in the MovieComponent, I want to be able to to make that API call again and set it again so I can retrieve the data again – Mister Killuminati Oct 24 '22 at 18:30
  • You can certainly do that. You can add a resolver for the parent route to get the movies data by dispatching an action – Brandon Taylor Oct 24 '22 at 19:22

0 Answers0