Custom store logic in Svelte - Step-by-Step Execution

Concept Flow - Custom store logic

Create store with initial value

↓

Subscribe function called

↓

Update function modifies value

↓

Notify subscribers with new value

↓

Subscribers react to updated value

↓

Repeat updates as needed

↓

Unsubscribe when done

This flow shows how a custom Svelte store holds a value, allows subscriptions, updates the value, and notifies subscribers.

Execution Sample

Svelte

import { writable } from 'svelte/store';

function createCounter() {
  const { subscribe, set, update } = writable(0);
  return {
    subscribe,
    increment: () => update(n => n + 1),
    reset: () => set(0)
  };
}

const counter = createCounter();

Defines a custom store 'counter' with subscribe, increment, and reset methods.

Execution Table

Step	Action	Store Value Before	Store Value After	Subscribers Notified
1	Create store with initial value 0	N/A	0	No
2	Subscribe to store	0	0	Yes
3	Call increment()	0	1	Yes
4	Call increment()	1	2	Yes
5	Call reset()	2	0	Yes
6	Unsubscribe	0	0	No

💡 Unsubscribe called, no more notifications sent.

Variable Tracker

Variable	Start	After Step 3	After Step 4	After Step 5	Final
store value	0	1	2	0	0

Key Moments - 3 Insights

Why does the subscriber get notified only after update or set?

Because the store calls subscribers only when the value changes, as shown in steps 3, 4, and 5 in the execution_table.

What happens if you call increment before subscribing?

The store value updates internally, but no subscriber is notified until a subscription exists, as shown by the 'Subscribers Notified' column.

Why do we return subscribe, increment, and reset from the custom store?

To allow external code to listen to changes (subscribe) and modify the store value (increment, reset), following the pattern in the execution_sample.

Visual Quiz - 3 Questions

Look at the execution_table, what is the store value after step 4?

A 2

B 0

C 1

D 3

💡 Hint

Check the 'Store Value After' column at step 4 in the execution_table.

At which step does the subscriber stop receiving notifications?

A Step 5

B Step 3

C Step 6

D Step 2

💡 Hint

Look at the 'Subscribers Notified' column and the exit_note in the execution_table.

If we call increment twice before subscribing, what changes in the execution_table?

A Subscribers notified at those increments

B Store value updates but no notifications until subscribe

C Store value does not update

D Store resets automatically

💡 Hint

Refer to key_moments about notifications and subscription timing.

Concept Snapshot

Custom store logic in Svelte:
- Use writable() to create a store with initial value
- Return subscribe, update, and set methods
- Subscribers get notified only on value changes
- Custom methods (like increment) update store value
- Unsubscribe stops notifications

Full Transcript

This example shows how to create a custom store in Svelte using writable. The store starts with value 0. When you subscribe, you get notified of changes. Calling increment updates the value and notifies subscribers. Reset sets the value back to 0 and notifies again. Unsubscribing stops notifications. The execution table tracks each step's store value and notifications. Key moments clarify why subscribers only get notified after updates and why returning methods is important. The visual quiz tests understanding of store value changes and subscription effects.