Readable stores in Svelte - Step-by-Step Execution

Concept Flow - Readable stores

Create readable store with initial value

↓

Subscribe function called

↓

Subscriber receives current value

↓

Store updates internally (optional)

↓

Subscribers notified with new value

↓

Unsubscribe when no longer needed

↓

End

Readable stores provide values that can be subscribed to but not directly changed by subscribers. Updates come from inside the store.

Execution Sample

Svelte

import { readable } from 'svelte/store';

const time = readable(new Date(), set => {
  const interval = setInterval(() => set(new Date()), 1000);
  return () => clearInterval(interval);
});

Creates a readable store that updates the current time every second.

Execution Table

Step	Action	Store Value	Subscriber Called	Notes
1	Create readable store with initial value	Current Date at creation	No	Store initialized with current time
2	Subscribe to store	Current Date at creation	Yes	Subscriber receives initial value immediately
3	1 second passes, interval triggers set()	New Date +1s	Yes	Subscriber notified with updated time
4	Another second passes, interval triggers set()	New Date +2s	Yes	Subscriber notified again
5	Unsubscribe called	Last Date value	No	Interval cleared, no more updates
6	No more updates	Last Date value	No	Store stops updating after unsubscribe

💡 Unsubscribe clears interval, stopping updates and subscriber calls

Variable Tracker

Variable	Start	After 1	After 2	After Unsubscribe
store value	Date at creation	Date +1s	Date +2s	Date +2s
subscriber called	No	Yes	Yes	No
interval active	Yes	Yes	Yes	No

Key Moments - 2 Insights

Why can't subscribers directly change the value of a readable store?

Readable stores only allow internal updates via the set function inside the store. Subscribers get notified but cannot set values themselves, as shown in steps 2 and 3 of the execution_table.

What happens when you unsubscribe from a readable store?

Unsubscribing calls the cleanup function that stops internal updates (like clearing intervals). This is shown in step 5 where the interval is cleared and no further subscriber calls happen.

Visual Quiz - 3 Questions

Look at the execution table, what is the store value at step 3?

A Initial Date at creation

B New Date +1s

C New Date +2s

D No value

💡 Hint

Check the 'Store Value' column at step 3 in the execution_table

At which step does the subscriber stop receiving updates?

A Step 5

B Step 3

C Step 2

D Step 6

💡 Hint

Look at the 'Subscriber Called' column and the notes about unsubscribe in the execution_table

If the cleanup function did not clear the interval, what would happen?

A Subscriber would never get updates

B Store value would never change

C Subscriber would keep getting updates even after unsubscribe

D Store would throw an error

💡 Hint

Refer to the 'interval active' variable in variable_tracker and step 5 in execution_table

Concept Snapshot

Readable stores in Svelte:
- Created with readable(initialValue, startFunction)
- Subscribers get current value immediately
- Only internal code can update value via set()
- Cleanup function stops updates on unsubscribe
- Subscribers cannot directly change store value

Full Transcript

Readable stores in Svelte provide a way to share data that can be read and subscribed to but not directly changed by subscribers. When you create a readable store, you give it an initial value and a function that can update the value internally, like a timer. Subscribers get the current value right away and get notified whenever the store updates. When they unsubscribe, the store runs a cleanup function to stop updates, such as clearing an interval. This keeps the data flow controlled and predictable.