How to store and manipulate data with angular, ngrx and redux when some components request same data from server?

Question

I'm using Angular7 with ngrx in my project and I need to fetch and store data for several same components. For example:

1. I have two (many to many) models Author and Book

2. I have AuthorListComponent which shows some list of AuthorCardComponent.

3. AuthorCardComponent contains "Show best books" button.

4. When user clicks on this button AuthorCardComponent should receive from server best books written by author.

As I understand redux, I need to normalize data i.e.

1. Store all loaded books in one place (books cache)

2. Store all request-response pairs with links to books cache

3. Keep how many responses contain each book to clear books cache from unused books.

4. All fetching duplicated books from server should be compared with stored instances and be overwritten if some properties differ.

So store looks like this

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

It's not so difficult to write all these action creators, reducers, size effects and so on but I have some unsolved questions:

1. How AuthorCardComponent can get proper selector for fetching request status and response data? When AuthorCardComponent calls

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

it doesn't know how to subscribe to own responseN if this response number generated by reducer.

2. How AuthorCardComponent can inform storage that last request is not needed anymore?

3. Is there more simple way to solve problem with keeping books and responses separatly?

4. Is there more suitable state manager instead ngrx/redux?

Answer 1

You'll want to use the selector you've created to get the information from the state. It would be something like this:

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

You can use something like the above in each component that needs the data, just select it from the store. You can then use the async pipe to display the data, as needed.

The async pipe will unsubscribe automatically.