I've just started to set up an NGRX/Store based sample project. My goal was to develop independent feature modules working on the same store. Later, these modules are to be outsourced to a library so that they can be integrated independently.
I have provided this really simple test project as a Stackblitz:
https://stackblitz.com/github/MarcManhart/ngrx-beispiel-projekt
Both modules load the data in their main components via an action, which in turn triggers an effect and which in turn obtains the data from a service. The classic way as far as I understand it.
However, it happens that these data overwrite each other if I first use the admin module to add data records and then navigate to the customer module.
So I have the feeling that I didn't integrate the store correctly. Can anybody help me further?
The components (each in its own module):
export class AdminHomeComponent implements OnInit {
movies$: Observable<Movie[]> = this.store.pipe(select(selectAllMovies));
constructor(private store: Store<fromReducer.State>) {
this.store.dispatch(loadMovies());
}
//...
}
export class MoviesComponent implements OnInit {
movies$: Observable<Movie[]> = this.store.pipe(select(selectAllMovies));
constructor(private store: Store<fromReducer.State>) {
this.store.dispatch(loadMovies());
}
//...
}
The action:
export const loadMovies = createAction('[Movies] Load movie');
The Effect:
@Injectable()
export class MovieEffects {
loadMovies$ = createEffect(() => this.actions$.pipe(
ofType(MovieActions.loadMovies),
mergeMap(() => this.movieService.getAll() // service returns data from API
.pipe(
map(movies => {
return MovieActions.loadMoviesSuccess({movies: movies});
}),
catchError(() => EMPTY)
))
)
);
constructor(
private actions$: Actions,
private movieService: MovieService
) {
}
}
