Svelte stores are not that difficult to understand. However, when you're first learning and you google "svelte stores," all you see is a whole bunch of counter examples.

I believe they are misunderstood, easier than you think, and need to be explained better.

At heart, a svelte store is a way to store data outside of components. The store object returns subscribe, set, and update methods. Because of the subscribe method, the store acts as an observable to update your data in real time. Under the hood, the data is being stored in a javascriptSet() object.

Basics

A svelte store looks like this:

store.ts

import{writable}from'svelte/store';...exportconstmy_store=writable<string>('default value');

If you store this in an outside.js or.ts file, you can import it anywhere to share your state.

Set / Get

You can set the state easily:

component.svelte

importmy_storefrom'./store.ts';...my_store.set('new value');

or get the state easily:

component2.svelte

import{get}from'svelte/store';importmy_storefrom'./store.ts';...constvalue=get(my_store);

Theget method will get the current value at that moment in time. If you change the value later, it will not be updated in the place in your code.

Subscribe

So you can subscribe to always get the latest value:

component3.svelte

importmy_storefrom'./store.ts';...constunsubscribe=my_store.subscribe((value:string)=>{console.log('The current value is:',value);// do something});...onDestroy(unsubscribe);

Notice just like any observable you have to destroy the instance of your subscription when the component is done rendering for good memory management.

Auto Subscriptions

You can also use a reactive statement to subscribe to a store.

importmy_storefrom'./store.ts';...// set latest value$my_store='new value';...// always get latest valueconstnew_value=$my_store;...// always update DOM with latest value<h1>{$my_store}</h1>

The beauty of using the$ syntax is that you don't have to handle the subscription withonDestroy, this is automatically done for you.

Update

Sometimes you want to change the value based on the current value.

You could do this:

importmy_storefrom'./store.ts';import{get}from'svelte/store';...my_store.subscribe((value:string)=>{my_store.set('new value'+value);// do something});...// or this...my_store.set('new value'+get(my_store));

Or you could just use theupdate method:

importmy_storefrom'./store.ts';...my_store.update((value:string)=>'new value'+value);

The key with theupdate method is to return the new value. When you store an actual object in your store, theupdate method is key to easily changing your object.

Deconstruction

You can deconstruct the 3 methods of a store to get exact control of your store.

const{subscribe,set,update}=writable<string>('default value');...// Subscribesubscribe((value:string)=>console.log(value));...// Setset('new value');...// Updateupdate((value:string)=>'new value'+value);

Start and Stop Notifications

Svelte Stores also have a second argument. This argument is a function that inputs theset method, and returns anunsubscribe method.

import{typeSubscriber,writable}from"svelte/store";...exportconsttimer=writable<string>(null,(set:Subscriber<string>)=>{constseconds=setInterval(()=>set(newDate().getSeconds().toString()),1000);return()=>clearInterval(seconds);});

I tried to make this easy to read (dev.to prints their code large). All this is is a function that gets repeated. When the component gets destroyed, the returned function is called to destroy the repetition in memory. That's it! It does not have to be overly complicated. As you can see, the second argument is perfect for observables.

Readable

The last example should really have been a readable. A readable is just a writable store, without returning theset andupdate methods. All it has is subscribe. Hence, you set the initial value, or your set the value internally with the start and stop notification function.

Derived Stores

Think of derived stores like rxjscombineLatest. It is a way to take two or more different store values, and combine them to create a new store. You also could just change only one store into a new value based on that store.

import{derived,readable,writable,typeSubscriber,typeWritable}from"svelte/store";...exportconsttimer=writable<string>(null,(set:Subscriber<string>)=>{constseconds=setInterval(()=>set(newDate().getSeconds().toString()),1000);return()=>clearInterval(seconds);});exportconsttimer2=writable<string>(null,(set:Subscriber<string>)=>{constseconds=setInterval(()=>set(newDate().getMinutes().toString()),1000);return()=>clearInterval(seconds);});

Let's say we have these two random timers. What if we want to concatenate or add them somehow?

derived<[stores...],type>([stores...],([$stores...])=>{// do somethingreturnnewvalue...});

This seems hard to read, but it basically says:

• first argument is the original store, or an array of stores
• second argument is the new function with the auto subscription, or an array of auto subscriptions from the stores.
• the return value is whatever type you want for the new value

So, to put our times together to some odd value, we could do:

exportconstd=derived<[Writable<string>,Writable<string>],string>([timer,timer2],([$timer,$timer2]:[$timer:string,$timer2:string])=>{return$timer+$timer2;});

If thetypescript confuses you here, just imagine this in vanilla js:

exportconstd=derived([timer,timer2],([$timer,$timer2])=>$timer+$timer2);

Or if you just want to change the value from one store, you could do:

exportconstd=derived(timer,$timer=>$timer+newDate().getMinutes().toString());

So derived stores have a very specific use case, and are not easy to read even in vanilla js.

Cookbook

Observables

Instead of importing wanka, rxjs, zen-observables, etc, you can just convert you subscription object into a store.

A perfect example of this is theonAuthStateChanged andonIdTokenChanged observables in Supabase and Firebase.

import{readable,typeSubscriber}from"svelte/store";...exportconstuser=readable<any>(null,(set:Subscriber<any>)=>{set(supabase.auth.user());constunsubscribe=supabase.auth.onAuthStateChange((_,session)=>session?set(session.user):set(null));returnunsubscribe.data.unsubscribe;});

or a Firestore subscription:

exportconstgetTodos=(uid:string)=>writable<Todo[]>(null,(set:Subscriber<Todo[]>)=>onSnapshot<Todo[]>(query<Todo[]>(collection(db,'todos')asCollectionReference<Todo[]>,where('uid','==',uid),orderBy('created')),(q)=>{consttodos=[];q.forEach((doc)=>todos.push({...doc.data(),id:doc.id}));set(todos);}));

Again, it is hard to make this readable on dev.to, but you can see you just return the observable here, which will already have anunsubscribe method. Supabase, for some odd reason, has its unsubscribe method embedded, so we have to return that directly.

Here is a Firebase Auth example:

exportconstuser=readable<UserRec>(null,(set:Subscriber<UserRec>)=>onIdTokenChanged(auth,(u:User)=>set(u)));

which is much simpler...

Function

A writable is really just an object with theset,update, andsubscribe methods. However, you will see a lot of examples returning a function with these methods because it is easier to embed the writable object.

The problem with these examples, is a writable is technically NOT a function, but an object.

exportconstsomething=(value:string)={const{set,update,subscribe}=writable<string|null>(value);return{set,update,subscribesetJoker:()=>set('joker')}};

So, this has all the functionality of a store, but with easy access to create new functionality. In this case, we can call a function to do anything we want. Normally, we set or update a value.

importsomethingfrom'./stores.ts';...constnewStore=something('buddy');newStore.setJoker();

Objects

When we want to store several values in a store, or an object itself, we can use an object as the input.

Also, sometimes we need to bind a value to store. We can't do this with a function.

<Dialogbind:open={$resourceStore.opened}>...</Dialog>

resourceStore.ts

interfacerStore{type:'add'|'edit'|'delete'|null,resource?:Resource|null,opened?:boolean};const_resourceStore=writable<rStore>({type:null,resource:null,opened:false});exportconstresourceStore={subscribe:_resourceStore.subscribe,set:_resourceStore.set,update:_resourceStore.update,reset:()=>_resourceStore.update((self:rStore)=>{self.type=null;self.opened=false;self.resource=null;returnself;}),add:()=>_resourceStore.update((self:rStore)=>{self.type='add';self.opened=true;returnself;}),edit:(resource:Resource)=>_resourceStore.update((self:rStore)=>{self.type='edit';self.resource=resource;self.opened=true;returnself;}),delete:(resource:Resource)=>_resourceStore.update((self:rStore)=>{self.type='delete';self.resource=resource;self.opened=true;returnself;})};

Here a resource can be anything. Something like this can be called with:

constr=newResource(...);resourceStore.edit(r);

Update: 5/4/23 - This should be refactored to prevent global declarations like so:

const_resourceStore=()=>{const{set,update,subscribe}=writable<rStore>({type:null,resource:null,opened:false});return{subscribe,set:set,update:update,reset:()=>update((self:rStore)=>{self.type=null;self.opened=false;self.resource=null;returnself;}),add:()=>update((self:rStore)=>{self.type='add';self.opened=true;returnself;}),edit:(resource:Resource)=>update((self:rStore)=>{self.type='edit';self.resource=resource;self.opened=true;returnself;}),delete:(resource:Resource)=>update((self:rStore)=>{self.type='delete';self.resource=resource;self.opened=true;returnself;})}};exportconstresourceStore=_resourceStore();

You could also do it in one line like so:

exportconstresourceStore=(()=>{...})();

So as you can see from beginning to end, a simple concept can be made overly complicated. All you're doing is storing a value outside your component. You can update it, set it, get it, subscribe to it, or create your own methods.

Either way, I find Svelte Stores easier to learn than React Hooks, but not as easy as Angular Services when it comes to objects.

I hope this helps someone,

J

Checkoutcode.build for more tips!