Why Readable stores in Svelte? - Purpose & Use Cases

The Big Idea

Discover how to keep your app's data perfectly in sync without lifting a finger!

The Scenario

Imagine you have a value that many parts of your app need to watch, like the current time or user status. You try to update it manually everywhere, writing code to check and update each place.

The Problem

Manually updating shared values is tiring and easy to mess up. You might forget to update some parts, causing bugs or inconsistent displays. It's like trying to keep many clocks in sync by hand.

The Solution

Readable stores let you create a single source of truth that many parts can watch. When the value changes, all watchers update automatically without extra code.

Before vs After

✗ Before

let time = new Date();
setInterval(() => {
  time = new Date();
  updateUI();
}, 1000);

✓ After

import { readable } from 'svelte/store';
const time = readable(new Date(), set => {
  const interval = setInterval(() => set(new Date()), 1000);
  return () => clearInterval(interval);
});

What It Enables

It enables effortless, automatic updates across your app whenever the shared value changes.

Real Life Example

Showing a live clock in multiple places of your app that always stays perfectly in sync without writing repetitive update code.

Key Takeaways

Manual updates of shared data are error-prone and repetitive.

Readable stores provide a single, reactive source of data.

They automatically notify all parts of your app when data changes.

Practice

1. What is the main purpose of a readable store in Svelte?

easy

A. To create a store that holds static, non-reactive data

B. To allow components to write and update the store value directly

C. To provide reactive data that cannot be changed from outside the store

D. To replace writable stores for all state management

Solution

1. Step 1: Understand readable store purpose

   A readable store provides reactive data but restricts external modifications.

2. Step 2: Compare with writable stores

   Writable stores allow external updates, readable stores do not.

3. Final Answer:

   To provide reactive data that cannot be changed from outside the store -> Option C

4. Quick Check:

   Readable store = read-only reactive data [OK]

Hint: Readable stores are read-only from outside [OK]

Common Mistakes:

• Confusing readable with writable stores
• Thinking readable stores allow external updates
• Assuming readable stores hold static data only

2. Which of the following is the correct way to create a readable store in Svelte that updates the current time every second?

easy

A. import { readable } from 'svelte/store'; const time = readable(new Date(), set => { const interval = setInterval(() => set(new Date()), 1000); return () => clearInterval(interval); });

B. import { writable } from 'svelte/store'; const time = writable(new Date());

C. import { readable } from 'svelte/store'; const time = readable(new Date());

D. import { readable } from 'svelte/store'; const time = readable(() => new Date());

Solution

1. Step 1: Recall readable store syntax

   Readable stores take an initial value and a start function that sets updates and cleanup.

2. Step 2: Analyze options

   import { readable } from 'svelte/store'; const time = readable(new Date(), set => { const interval = setInterval(() => set(new Date()), 1000); return () => clearInterval(interval); }); correctly uses readable with a start function that updates time every second and cleans up.

3. Final Answer:

   import { readable } from 'svelte/store'; const time = readable(new Date(), set => { const interval = setInterval(() => set(new Date()), 1000); return () => clearInterval(interval); }); -> Option A

4. Quick Check:

   Readable store needs start function for updates [OK]

Hint: Readable stores need a start function for dynamic updates [OK]

Common Mistakes:

• Omitting the start function for dynamic data
• Using writable instead of readable
• Passing a function without calling set inside

3. Given this readable store code, what will be logged to the console after 3 seconds?

import { readable } from 'svelte/store';

const count = readable(0, set => {
  let n = 0;
  const interval = setInterval(() => {
    n += 1;
    set(n);
  }, 1000);
  return () => clearInterval(interval);
});

count.subscribe(value => console.log(value));

medium

A. Only 0

B. 1, 2, 3

C. 0, 1, 2

D. 0, 1, 2, 3

Solution

1. Step 1: Understand initial value and updates

   The readable store starts at 0 and increments n every second, calling set(n).

2. Step 2: Trace values over 3 seconds

   At start: 0 logged immediately. After 1s: 1, after 2s: 2, after 3s: 3 logged.

3. Final Answer:

   0, 1, 2, 3 -> Option D

4. Quick Check:

   Initial + increments each second = 0,1,2,3 [OK]

Hint: Readable emits initial value immediately on subscribe [OK]

Common Mistakes:

• Ignoring initial value emission
• Counting only increments without initial
• Assuming subscription logs only after first interval

4. What is wrong with this readable store code?

import { readable } from 'svelte/store';

const data = readable(0, set => {
  const interval = setInterval(() => {
    set(Date.now());
  }, 1000);
  // Missing cleanup function
});

medium

A. The store is missing an initial value

B. The start function does not return a cleanup function

C. You cannot use setInterval inside a readable store

D. The set function should not be called inside the start function

Solution

1. Step 1: Check readable store start function requirements

   The start function must return a cleanup function or undefined for cleanup.

2. Step 2: Analyze given code

   The code creates an interval that calls set every second but does not return any cleanup function.

3. Final Answer:

   The start function does not return a cleanup function -> Option B

4. Quick Check:

   Start function must return cleanup or undefined [OK]

Hint: Always return cleanup function or undefined in readable start [OK]

Common Mistakes:

• Ignoring cleanup function requirement
• Thinking setInterval is disallowed in stores
• Believing set cannot be called inside start

5. You want to create a readable store that emits the current window width and updates on resize. Which code snippet correctly implements this behavior?

hard

A. import { readable } from 'svelte/store';

const width = readable(window.innerWidth, set => {
const onResize = () => set(window.innerWidth);
window.addEventListener('resize', onResize);
return () => window.removeEventListener('resize', onResize);
});

B. import { writable } from 'svelte/store';

const width = writable(window.innerWidth);
window.addEventListener('resize', () => width.set(window.innerWidth));

C. import { readable } from 'svelte/store';

const width = readable(() => window.innerWidth);

D. import { readable } from 'svelte/store';

const width = readable(window.innerWidth);
window.addEventListener('resize', () => width.set(window.innerWidth));

Solution

1. Step 1: Understand readable store with event listener

   Readable stores need a start function to set updates and cleanup listeners.

2. Step 2: Check options for correct event handling and cleanup

   import { readable } from 'svelte/store'; const width = readable(window.innerWidth, set => { const onResize = () => set(window.innerWidth); window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }); adds resize listener, calls set on resize, and removes listener on cleanup.

3. Final Answer:

   import { readable } from 'svelte/store'; const width = readable(window.innerWidth, set => { const onResize = () => set(window.innerWidth); window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }); -> Option A

4. Quick Check:

   Readable with event listener and cleanup = import { readable } from 'svelte/store'; const width = readable(window.innerWidth, set => { const onResize = () => set(window.innerWidth); window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }); [OK]

Hint: Use readable with start function adding/removing event listeners [OK]

Common Mistakes:

• Using writable store when read-only is needed
• Not removing event listeners on cleanup
• Passing function instead of initial value to readable