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.