Why Custom store logic in Svelte? - Purpose & Use Cases

The Big Idea

What if your app could handle all the boring updates for you, perfectly every time?

The Scenario

Imagine you have a shopping cart on a website and you want to update the total price every time someone adds or removes an item. Doing this by hand means you must watch every change and update the total yourself.

The Problem

Manually tracking changes is tiring and easy to mess up. You might forget to update the total or update it too late, causing wrong prices to show. It's like trying to keep score in a game without a scoreboard.

The Solution

Custom store logic in Svelte lets you create a smart container that watches changes and updates the total automatically. You write the rules once, and the store handles the rest, keeping your app neat and reliable.

Before vs After

✗ Before

let total = 0;
let items = [];
function addItem(price) {
  items.push(price);
  total = items.reduce((a, b) => a + b, 0);
}

✓ After

import { writable, derived } from 'svelte/store';
function createCart() {
  const store = writable([]);
  const { subscribe, update } = store;
  return {
    subscribe,
    addItem: (price) => update(items => [...items, price]),
    total: derived(store, $items => $items.reduce((a, b) => a + b, 0))
  };
}

What It Enables

It makes your app smarter and easier to maintain by automatically managing data changes and updates behind the scenes.

Real Life Example

Think of a music playlist app that updates the total playtime as you add or remove songs without you needing to recalculate it every time.

Key Takeaways

Manual updates are slow and error-prone.

Custom store logic automates data tracking and updates.

This leads to cleaner, more reliable apps.