當某些組件從服務器請求相同的數據時，如何使用 angular、ngrx 和 redux 存儲和操作數據？

Question

我在我的項目中使用 Angular7 和 ngrx，我需要為幾個相同的組件獲取和存儲數據。 例如：

1. 我有兩個（多對多）模型 Author 和 Book

2. 我有 AuthorListComponent，它顯示了一些 AuthorCardComponent 列表。

3. AuthorCardComponent 包含“顯示最佳書籍”按鈕。

4. 當用戶單擊此按鈕時，AuthorCardComponent 應從服務器接收作者編寫的最佳書籍。

據我了解 redux，我需要規范化數據，即

1. 將所有加載的書籍存儲在一個地方（書籍緩存）

2. 存儲所有帶有書籍緩存鏈接的請求-響應對

3. 保留每本書包含多少響應以從未使用的書籍中清除書籍緩存。

4. 所有從服務器獲取重復書籍都應與存儲的實例進行比較，如果某些屬性不同，則應覆蓋。

所以商店看起來像這樣

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: '...', /* .... */ },
            /* ... */
        }
    }         
}

編寫所有這些動作創建器、減速器、大小效果等並不難，但我有一些未解決的問題：

1. AuthorCardComponent 如何獲得正確的選擇器來獲取請求狀態和響應數據？ 當 AuthorCardComponent 調用時

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

如果這個響應號是由 reducer 生成的，它不知道如何訂閱自己的 responseN。

2. AuthorCardComponent 如何通知存儲不再需要最后一個請求？

3. 有沒有更簡單的方法來解決分開保存書籍和回復的問題？

4. 有沒有更合適的狀態管理器而不是 ngrx/redux？

Answer 1

您需要使用您創建的選擇器從狀態中獲取信息。 它會是這樣的：

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

您可以在需要數據的每個組件中使用類似上述內容，只需從商店中選擇即可。 然后，您可以根據需要使用async管道來顯示數據。

async管道將自動取消訂閱。