Readable stores in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a readable store that starts with the value 0.

Svelte

import { readable } from 'svelte/store';

const count = readable([1], () => {});

Drag options to blanks, or click blank then click option'

A''

Bnull

Cundefined

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using null or undefined as the initial value causes unexpected behavior.

Leaving the initial value empty or as an empty string.

The readable store requires an initial value. Here, 0 is the starting value.

2fill in blank

medium

Complete the code to set up a readable store that updates every second with the current time.

Svelte

import { readable } from 'svelte/store';

const time = readable(new Date(), function start(set) {
  const interval = setInterval(() => {
    set([1]);
  }, 1000);

  return () => clearInterval(interval);
});

Drag options to blanks, or click blank then click option'

ADate.now()

Bnew Date()

CDate.toString()

DsetInterval()

Attempts:

3 left

💡 Hint

Common Mistakes

Using Date.now() returns a timestamp number, not a Date object.

Calling setInterval() inside set causes errors.

The set function needs the current time as a Date object, so new Date() is correct.

3fill in blank

hard

Fix the error in the readable store that tries to update a count every second but does not clear the interval.

Svelte

import { readable } from 'svelte/store';

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

  return () => [1];
});

Drag options to blanks, or click blank then click option'

AclearInterval(interval)

BclearTimeout(interval)

CstopInterval(interval)

DcancelInterval(interval)

Attempts:

3 left

💡 Hint

Common Mistakes

Using clearTimeout instead of clearInterval.

Not returning a cleanup function at all.

To stop a repeating timer created by setInterval, you must call clearInterval with the interval ID.

4fill in blank

hard

Fill both blanks to create a readable store that fetches data once and stops when unsubscribed.

Svelte

import { readable } from 'svelte/store';

const data = readable(null, (set) => {
  fetch('/api/data')
    .then(response => response.json())
    .then([1] => set([2]));

  return () => {};
});

Drag options to blanks, or click blank then click option'

Adata

Bresult

Cresponse

Djson

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names causing confusion.

Passing the wrong variable to set.

The then callback receives the parsed JSON, here named result, which is then passed to set to update the store.

5fill in blank

hard

Fill all three blanks to create a readable store that counts seconds and stops after 10 seconds.

Svelte

import { readable } from 'svelte/store';

const timer = readable(0, (set) => {
  let count = 0;
  const interval = setInterval(() => {
    count += 1;
    set([1]);
    if (count === [2]) {
      [3](interval);
    }
  }, 1000);

  return () => clearInterval(interval);
});

Drag options to blanks, or click blank then click option'

Acount

B10

CclearInterval

DsetInterval

Attempts:

3 left

💡 Hint

Common Mistakes

Using setInterval instead of clearInterval to stop the timer.

Not updating the store with the count variable.

The store updates with count, stops after 10 seconds, and clears the interval with clearInterval.

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