Question

我在我的项目中将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: '...', /* .... */ },
            /* ... */
        }
    }         
}

编写所有这些动作创建者，减速器，尺寸效果等并不难，但我有一些未解决的问题：

AuthorCardComponent如何获得正确的选择器以获取请求状态和响应数据？当AuthorCardComponent调用时

this.store.dispatch({action: 'BOOKS_GET', payload: {request: {authorId: id}});

如果该响应号由reducer生成，则不知道如何订阅自己的responseN。

AuthorCardComponent如何通知存储不再需要最后一个请求？
是否有更简单的方法来解决问题，即分开整理书本和回复？
是否有更合适的状态管理器代替ngrx / redux？

Answer 1

您将要使用创建的选择器从状态中获取信息。会是这样的：

  books$: Observable<BooksStateDetails> = this.store.pipe(
    select(selectBooks)
  );

您可以在每个需要数据的组件中使用类似上述的内容，只需从商店中选择它即可。然后，您可以根据需要使用async管道显示数据。

async管道将自动退订。

当某些组件从服务器请求相同数据时，如何使用angular，ngrx和redux存储和操作数据？

1 个答案: