reselect for ngRx apps

In the ngRx Sample App: https://github.com/ngrx/example-app

Here we have this selector in Reducers-> Index.ts :

export const getBookEntities = createSelector(getBooksState, fromBooks.getEntities);
Now, to understand this, we need to understand how the store is structured…
Store has Books, which has Entities.

Now, the getBooksState is in Reducers-> Index.ts :

export const getBooksState = (state: State) => state.books;
It uses the global store to return the books from it.
One the other hand, the fromBooks.getEntities (in reducers/books.ts):
export const getEntities = (state: State) => state.entities;
So, what’s happening is that the reselect library’s createSelector is a composite selector which, first gets the books state from the getBooksState selector, and then passes that state to the getEntities selector which knows how to get Entities, given the book state
USE CASE:
  • When we have the Book state handy, we can use the “fromBooks.getEntities” to get the Entities of that book  The Book state has the Entities object, so if we have the book state, there’s no need for any selector.
  • The use of the fromBooks.getEntities selector which returns just the entities object of all books, is only so that that getBookEntities can compose the act of getting books and getting entities from those books.

You don’t need reselect

The select() method will give you an observable that calls distinctUntilChanged() internally, meaning they will only fire when the state actually changes. ( it means when there is a new reference ).

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s