Single Entity with Book Example

[szarkowicz]

Hi,

I might be missing something pretty easy but how do I setup the store so that component can use the async pipe to get just a single entity (book).

In all the examples I found ->

book.repository.ts
export class BooksRepository 
{
  books$ = store.pipe(selectAll());
  book$ = store.pipe(selectEntity(''));

  setBooks(books: Book[]) {
    store.update(setEntities(books));
    this.book$ = store.pipe(selectEntity('s9lymQEACAAJ'));
  }
}

app.component.ts
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  books$ = this.repo.book$
  singleBook$ = this.repo.book$;
  constructor(
    private booksService: GoogleBooksService,
    public repo: BooksRepository
  ) {}

  ngOnInit() {
    this.booksService.getBooks().subscribe();
  }
}

app.component.html
<h2>Books</h2>
{{ books$ | async }} <!-- Works -->
<hr />
{{ singleBook$ | async }} single book <!-- Does Not work -->

Here is the modified slackblitz example link
https://stackblitz.com/edit/angular-ivy-kkjzhw?file=src/app/state/books.repository.ts

If I am way off on how to be using the selectEntity or how to setup a component to listen for a single book please let me know.

Thank You
Sean

[NetanelBasal]

You need to pass an id - book$ = store.pipe(selectEntity('ZodQAAAAMAAJ'));

[NetanelBasal]

Also, use the json pipe in the code to better see the result.

[szarkowicz]

Hi Nethanel,

Thanks for getting back to me. The problem is when the BooksRepository class is created - I dont have a book ID to get - so thats why I just passed it a blank id to start and then when the google book service completes it updates the books entity and

this.book$ = store.pipe(selectEntity('s9lymQEACAAJ'));

and then I update just the single book.

Hope this makes sense

[NetanelBasal]

It doesn't make sense. You need to have an id.

[szarkowicz]

Nathanel,

I am trying to subscribe to the book$ from the book repository and just listen(subscribe) when book$ has been updated.

book.repository.ts

book$ = store.pipe(selectEntity(''));

setBooks(books: Book[]) {
  store.update(setEntities(books));
  this.book$ = store.pipe(selectEntity('s9lymQEACAAJ'));
}

app.component.ts
book$ = this.bookRepo.book$;

What I have noticed is that the line in the app.component.ts book$ does not update when a new book is set in the book.repository.ts

Is there a different way that I should be listening or subscribing in the app.component.ts for the book?

I want to listen for the book to be updated when the store.pipe(selectEntity('s9lymQEACAAJ')); runs and pass that book to any child components.

Hopefully this helps with what I am trying to do with the store.

Thanks

[gerhardolivier]

Did you manage with this?

[draylegend]

I think, every time you reassign the book$, the reference gets lost and the template loses the value, too.

I usually use a selectedId in a state for a selected entity. The selected id could be undefined at the beginning

const {config, state} = createState(
  withProps<{selectedId?: string}>(),
  // ...
);

const store = new Store({name: 'bookState', config, state});

@Injectable()
export class BookRepo {
  book$ = store.pipe(select(s => s.entities[s.selectedId]));

  setBooks(books: Book[], selectedId: string) {
    // Every time you change the selected id, the 'book$' will return the according book from the state.
    store.update(setEntities(books), s => ({...s, selectedId}));
  }
}

@Component({
  template: `
    Either <div *ngIf="repo.book$ | async as book">{{book.name}}</div>
    Or <div>{{(repo.book$ | async)?.name}}</div>
  `
})
export class BookComponent {
  constructor(public repo: BookRepo) {}
}