NgRx Store types and it’s consequences

  • NORMALIZED STORE
    • Reducing the State
      • Here we’ll have filters and items separate and so filter will just contain an array of item IDs and the actual items and their ID and selected state will be a separate entity.
      • This helps when updating the item’s state. For instance when the user selects an item, all we need to do it to pass the ID with the TOGGLE_ITEM_STATE action to the ITEM REDUCER, which will simply find the Item in the current state (passed it it by ngRx) and toggle it’s state and return the complete item array, which ngRx will update in the store.
      • The benefit with this approach is that the filter reducer doesn’t even come into picture for toggling the state of the items.
    • Observing the State
      • Let’s see how this approach works for rendering the filter in UI.
      • Now, our requirement is basically to have an observable of the items list which the presentation component can simply display on UI
      • To create this we need both the filter and item state. Hence we’ll create a selector that will observe the filter.itemIDs and whenever it changes, we get the items array returned from state.select(items) and filter it to keep only item IDs from filter.itemIDs and get the final array of filter’s items and create an Observable.FromArray() thereby create a new observable of only the items whose IDs are a part of the itemIDs in the filter. The selector will return this new Observable.
      • The presentation component can then *ngFor on this new selector using the |async flag
  • DE-NORMALIZED STORE
    • Reducing the state
      • Let’s say we have a Filter reducer that has an items array, and each item has name and selected property.
      • Now, when the user selects items on the filter, we dispatch the FILTER_A.TOGGLE_ITEM_STATE with the item name and the filter A reducer will listen to it and update the item state.
    • Observing the state
      • This will be straightforward observation of the items array of the filter state
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