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.