• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Level Up Aurelia Store With pluck and distinctUntilChanged

Aurelia Store · May 8, 2020

Aurelia Store is a powerful state management library for your Aurelia applications, but behind-the-scenes it merely wraps the powerful RxJS observable library. This means you can use a plethora of RxJS methods to change how Aurelia Store works.

Problem: Aurelia Store will fire all state subscribers regardless of change

Whenever your state changes, all listeners of the state object will be fired. While smaller applications won’t introduce any noticeable differences, as your application grows in size and complexity, depending on what you’re doing inside of those store subscribers you can run into some issues.

Sometimes you only want code to run inside of an Aurelia Store subscription if it needs too, akin to some kind of if statement that checks if the code needs to be run.

For example, if you have a isLoading property in your store that changes depending on whether or not something is loading, any code that watches this property should only fire when it changes, not whenever the store’s state changes. Why should isLoading checks care if you’ve loaded a bunch of users or products data?

Solution

Using the RxJS methods pluck and distinctUntilChanged, we can tell our subscriptions to only fire if a specific property in our store has changed. The pluck method allows us to tell RxJS to only watch a specific property in our state object. For the above loading example, we would want to “pluck” the isLoading property pluck('isLoading').

Lastly, we want to use the distinctUntilChanged method which accepts no arguments. All it does is takes our “plucked” value and compares it to its previous value to see if it changed or not.

import { distinctUntilChanged, pluck } from 'rxjs/operators';

this.store.state.pipe(pluck('isLoading'), distinctUntilChanged()).subscribe((isLoading) => {
    // The isLoading property changed
});

Now, this works great for most use cases. However, as documented in the distinctUntilChanged the documentation details a caveat on how the check works you need to be aware of.

distinctUntilChanged uses === comparison by default, object references must match!

If you want to do a check based on an object property, you need to use the distinctUntilKeyChanged method which is not covered in this post.

Really, that is all there is to it. You pluck a property and then you do a distinct check to react whether or not the value has changed. This is all just RxJS code and nothing overly Aurelia Store specific. There are a tonne of other RxJS operators you should read up on.

Dwayne

Leave a Reply Cancel reply

0 Comments
Inline Feedbacks
View all comments

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Web 3.0 may have died before it even started
  • Smoke Detector Randomly Goes Off Early Hours of The Morning
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • How To Calculate A Javascript Date X Months Ago With Vanilla Javascript
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex
  • Which Neural DSP Archetype Plugins Should You Buy?

Recent Comments

  • Casey Milne on A List of WordPress Gutenberg Core Blocks
  • Jay on Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • john on Deno Raises $21M – but is anyone using it yet?
  • Oranges on How To Store Users In Firestore Using Firebase Authentication
  • Precious on Fixing Sequel Pro SQL Encoding Error For Imported SQL Files

Copyright © 2022 · Dwayne Charrington · Log in

wpDiscuz