observable - Angular subscribe steps to handle createSelector response

Question

I prepared a store with followed output and want to make a page as author's books e.g localhost/history/author1 which loads the list of their books, and even though i could run it correctly, i cant handle wrong paths to redirect to another page since it is reading data from state and has to first load it then control correct path inputs.

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'history/:author', component: AuthorPageComponent },
  { path: 'not-found', component: NotFoundComponent },
  { path: '**', redirectTo: 'not-found' }
];

the problem is .subscribe to store$.select(BookSelectors.selectBookByAuthor, params.author) first returns empty array and if i run navigate based on it all pages redirect to home, and if dont according to my Routes content any history/:author request will load AuthorPageComponent so how can i wait to end of select calling then return result?

// console output during running select


Array []                  author-page.component.ts:62:24
[WDS] Live Reloading enabled. client:52
Array [ {…}, {…} ]        author-page.component.ts:60:24

// state output


ids: [...]
entities: 
  - id: 1
  - title: 'test'
  - author: {
     - id: 0
     - name: 'author1'
    }

  - id: 2
  - title: 'example'
  - author: {
     - id: 0
     - name: 'author1'
    }

  - id: 3
  - title: 'sample'
  - author: {
     - id: 1
     - name: 'author2'
    }

// book.selector.ts

import { createFeatureSelector, createSelector } from '@ngrx/store';
import { Book } from '../../interfaces/book.interface';
import { BookState, bookAdapter } from './book.adapter';

export const selectBookState = createFeatureSelector<BookState>( 'books' );


export const {
    selectIds,
    selectEntities,
    selectAll,
    selectTotal
} = bookAdapter.getSelectors( selectBookState )


export const selectBookByAuthor = createSelector(
    selectEntities,
    (entities, author_name: string) => {
        const books: Array<Book> = [];
        if (entities) {
            Object.values(entities).find(
                (b) => {
                    if (b['author']['name'] === author_name) {
                        books.push(b as Book)
                    }
                }
            );
            return books
        }
    }
)

and for author page as author.component.ts

  ngOnInit(): void {

    this.route.params.subscribe(
      (params: Params) => {

        return this.store$.select(BookSelectors.selectBookByAuthor, params.author)
          .subscribe(
            result => {
              if (result.length > 0) {
                this.result = result
                console.log(result)
              } else { // the problem is here, first of all returns [] so navigates to home immediately 
                // this.router.navigate(['/']);
                console.log(result)
              }
            }
          )

      }
    )

question from:https://stackoverflow.com/questions/65885519/angular-subscribe-steps-to-handle-createselector-response

Answer 1

Waitting for answers