我在我的项目中将Angular7与ngrx一起使用,我需要获取和存储几个相同组件的数据。 例如:
我有两个(很多)模型Author和Book
我有AuthorListComponent,其中显示了AuthorCardComponent的一些列表。
AuthorCardComponent包含“显示最佳书籍”按钮。
当用户单击此按钮时,AuthorCardComponent应该从服务器收到作者撰写的最佳书籍。
据我了解,redux,我需要规范化数据,即
将所有已加载的图书存储在一个位置(图书缓存)
存储所有请求-响应对以及指向图书缓存的链接
保持每本书包含多少回复,以清除未使用的书籍中的书籍缓存。
所有从服务器读取重复的书籍都应与存储的实例进行比较,如果某些属性不同,则将其覆盖。
所以商店看起来像这样
store = {
authors: {/* .... */},
books: {
totalRequests: 3,
requests: {
"request1": {
request: {authorId: 77},
status: 'done',
total: 3,
bookIds: ['15', '99', '101']
},
"request2": {
request: {authorId: 88},
status: 'loading',
},
"request3": {
request: {authorId: 66},
status: 'done',
total: 5,
bookIds: ['55', '94', '141']
}
},
booksCache: {
'15': { id: '15', label: '...', /* .... */ },
'55': { id: '55', label: '...', /* .... */ },
'94': { id: '94', label: '...', /* .... */ },
/* ... */
}
}
}
编写所有这些动作创建者,减速器,尺寸效果等并不难,但我有一些未解决的问题:
this.store.dispatch({action: 'BOOKS_GET', payload: {request: {authorId: id}});
如果该响应号由reducer生成,则不知道如何订阅自己的responseN。
AuthorCardComponent如何通知存储不再需要最后一个请求?
是否有更简单的方法来解决问题,即分开整理书本和回复?
是否有更合适的状态管理器代替ngrx / redux?
答案 0 :(得分:1)
您将要使用创建的选择器从状态中获取信息。会是这样的:
books$: Observable<BooksStateDetails> = this.store.pipe(
select(selectBooks)
);
您可以在每个需要数据的组件中使用类似上述的内容,只需从商店中选择它即可。然后,您可以根据需要使用async
管道显示数据。
async
管道将自动退订。