-
-
-
Should you use Svelte’s store subscribe or the reactivity $ (dollar sign)
Svelte is a front-end JavaScript framework developed by Rich Harris in 2016. It is used by many software houses as their main frontend framework because dev facilities offered by Svelte make their developers' life less complicated as compared to writing JS boilerplate code.
Svelte is a tool for building fast web applications that converts your system into ideal JavaScript at build time, rather than interpreting your application code at run time. You don't need to pay the performance cost of the framework's abstraction. The .js file Svelte produces contains the reusable components’ core logic for implementation, event handling, and patching the DOM when variable values change. Only basic knowledge of HTML and CSS is required to understand and use Svelte easily.
Svelte’s Stores
Changing the UI based on a variable is a common practice in frontend development. These variables are often referred to as app states. It is common for this app state to be accessed by components that then change appearance accordingly.
In Svelte, we achieve this using stores. A store is simply an object with a subscribe() method that notifies subscribed elements when the store value changes. In the below application - App.svelte, “count” is a store, and we're setting count_value in the count.subscribe callback. In this way, the “+” button will cause an increment in the value of “count”.
<script>
import { count } from './stores.js';
import Incrementer from './Incrementer.svelte';
import Decrementer from './Decrementer.svelte';
import Resetter from './Resetter.svelte';
let count_value;
count.subscribe(value => {
count_value = value;
});
</script>
<h1>The count is {count_value}</h1>
<Incrementer/>
<Decrementer/>
<Resetter/>
Svelte Stores allow you to separate your state management from your component management. This is usually important whenever you need the same piece of data in more than one component in any building app.
With Svelte, you can define your stores and just search for them in your DOM elements. When the store updates, it will create a partial re-release with the latest details.
If you've been using Node event emitters or RxJS Observables, then you already have an idea of how stores work. They take over the registration function with their own subscribe function providing similar functionality. You can even use the Redux store as a Svelte store with minimal modifications.
Svelte’s reactive $ syntax
More often than not, you'll have to copy all the above code to every file where you want to subscribe to a store.
That's too long and non-reactive for Svelte! Svelte has more sources to make our lives leisurely and our code optimized. Svelte’s reactive $store syntax, also known as auto-subscription allows you to simply prefix the store with the $ sign to implement the store functionality. Svelte will generate the code to make it reactive automatically. So our previous code block can be replaced with this:
<script>
import myStore from './stores.js';
</script>
{$mystore}
This implements the above-mentioned example and steps so that $myStore will be fully reactive. This method can also be applied to your own custom stores by simply implementing the subscribe() function. Then you can access global stores just like reactive local variables. Once you've pulled a store into your Svelte component, you can treat it like any normal JavaScript object as long as you have prefixed it with $.
Store subscribe vs $ syntax - The better approach?
Svelte’s $ is a great modification provided on top of the stores’ functionality to write cleaner code and is definitely a better way to handle reactivity in web applications.
The first and most obvious advantage is that you have to write much less code to implement stores. Only using $ with variables makes them a store and subscribing/unsubscribing is handled automatically. If you want to access the store’s value anywhere in the script, just a single line is needed. This makes your code compatible with the coding principles by making it reusable and modular.
The reactive $ syntax is also easier to learn for newbies or programmers just getting started with Svelte since it is used as a simple JS object. So, use Svelte to write better code and train better programmers!
Author
Michael Andersen
I am a self-taught and highly passionate web developer currently living in Sweden, where I use my skills to make the internet a better place through ethical and sustainable web design.
Michael Andersen
I am a self-taught and highly passionate web developer currently living in Sweden, where I use my skills to make the internet a better place through ethical and sustainable web design.
