Readable stores in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a readable store in Svelte?

A readable store is a special kind of store in Svelte that lets components subscribe to its value but does not allow them to change it directly. It is used to share data that should only be updated from inside the store itself.

beginner

How do you create a readable store in Svelte?

You use the readable function from svelte/store. It takes an initial value and a start function that sets up how the store updates its value.

intermediate

What is the purpose of the start function in a readable store?

The start function runs when the first subscriber subscribes. It can set up timers, fetch data, or listen to events. It returns a stop function to clean up when no subscribers remain.

beginner

Can components update the value of a readable store directly?

No. Components can only subscribe to readable stores to get their values. Only the code inside the store (like the start function) can update the value.

intermediate

Give a simple example of a readable store that updates the current time every second.

Example:<br><pre>import { readable } from 'svelte/store';

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

  return () => clearInterval(interval);
});</pre>

What does the readable function return in Svelte?

A A store that components can read and write to

B A store that components can only read but not write to

C A function to update the store value

D A component that displays data

The readable function creates a store that components can subscribe to but cannot update directly.

What should the start function in a readable store return?

A A cleanup function to stop updates

B The initial value of the store

C A boolean indicating if the store is active

D Nothing, it should not return anything

The start function returns a cleanup function that runs when the last subscriber unsubscribes.

Which of these is true about readable stores?

A They cannot be subscribed to

B They allow external code to update their value

C They only allow internal code to update their value

D They are the same as writable stores

Readable stores restrict updates to internal code only, unlike writable stores.

How do you subscribe to a readable store in a Svelte component?

A Using the $ prefix like <code>$storeName</code>

B By calling <code>storeName.set()</code>

C By importing <code>subscribe()</code> from Svelte

D By using <code>storeName.update()</code>

In Svelte components, you use the $ prefix to auto-subscribe to stores.

What happens if no components subscribe to a readable store?

A The store resets to its initial value

B The store continues updating regardless

C The store throws an error

D The store stops updating and cleans up resources

When no subscribers remain, the cleanup function returned by start runs to stop updates.

Explain what a readable store is in Svelte and how it differs from a writable store.

Think about who controls the data changes.

Describe how you would create a readable store that updates its value over time and cleans up when no longer needed.

Focus on the start function and cleanup.

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