我刚刚开始设置一个基于NGRX/商店的样本项目。
我的目标是开发在同一家商店工作的独立功能模块。后来，这些模块将被外包给图书馆，以便可以独立整合。
我已经提供了一个非常简单的测试项目，作为stackblitz：
两个模块都通过操作将数据加载到其主要组件中，这反过来又会触发效果，然后从服务中获得数据。据我了解，这是经典的方式。
但是，如果我首先使用管理员模块添加数据记录，然后导航到客户模块，则这些数据会互相覆盖。
因此，我感觉我没有正确整合商店。有人可以进一步帮助我吗？
组件（每个模块中的每个模块）：
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());
}
//...
}
动作：
export const loadMovies = createAction('[Movies] Load movie');
效果：
@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
) {
}
}
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
) {
}
}
发布评论