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.

Practice

1. What is the main purpose of creating a custom store in Svelte?

easy

A. To disable reactivity in the app

B. To add custom methods and control how data updates and shares

C. To make the store work only on the server side

D. To replace the built-in writable store completely

Solution

1. Step 1: Understand what a custom store does

   A custom store extends the basic writable store by adding your own methods to control data updates and sharing.

2. Step 2: Compare options with this understanding

   Only "To add custom methods and control how data updates and shares" correctly describes this purpose. The other options misunderstand the role of custom stores: disabling reactivity, replacing the built-in writable store completely, or server-side only.

3. Final Answer:

   To add custom methods and control how data updates and shares -> Option B

4. Quick Check:

   Custom store purpose = Add custom methods [OK]

Hint: Custom stores add your own methods to writable stores [OK]

Common Mistakes:

• Thinking custom stores replace writable stores entirely
• Believing custom stores disable reactivity
• Assuming custom stores only run on the server

2. Which of the following is the correct way to create a custom store in Svelte?

easy

A. import { writable } from 'svelte/store'; function createStore() { const { subscribe, update } = writable(0); return { subscribe, increment: () => update(n => n + 1) }; }

B. import { readable } from 'svelte/store'; function createStore() { const { subscribe } = readable(0); return { subscribe, increment: () => {} }; }

C. import { writable } from 'svelte/store'; function createStore() { const { subscribe, set } = writable(0); return { subscribe, increment: () => set(n => n + 1) }; }

D. import { store } from 'svelte/store'; function createStore() { return { subscribe: () => {}, increment: () => {} }; }

Solution

1. Step 1: Check import and store creation

   import { writable } from 'svelte/store'; function createStore() { const { subscribe, update } = writable(0); return { subscribe, increment: () => update(n => n + 1) }; } correctly imports writable and uses update to change the value.

2. Step 2: Verify method usage

   import { writable } from 'svelte/store'; function createStore() { const { subscribe, set } = writable(0); return { subscribe, increment: () => set(n => n + 1) }; } incorrectly uses set with a function argument, which is invalid. import { readable } from 'svelte/store'; function createStore() { const { subscribe } = readable(0); return { subscribe, increment: () => {} }; } uses readable which is read-only. import { store } from 'svelte/store'; function createStore() { return { subscribe: () => {}, increment: () => {} }; } imports a non-existent store.

3. Final Answer:

   import { writable } from 'svelte/store'; function createStore() { const { subscribe, update } = writable(0); return { subscribe, increment: () => update(n => n + 1) }; } -> Option A

4. Quick Check:

   Correct syntax uses writable and update() [OK]

Hint: Use writable and update() for custom store methods [OK]

Common Mistakes:

• Using set() with a function argument
• Using readable store when write access is needed
• Importing non-existent store types

3. Given this custom store code, what will be logged after calling counter.increment() twice?

import { writable } from 'svelte/store';
function createCounter() {
  const { subscribe, update } = writable(0);
  return {
    subscribe,
    increment: () => update(n => n + 1)
  };
}
const counter = createCounter();
counter.subscribe(value => console.log(value));
counter.increment();
counter.increment();

medium

A. 0, 1, 2

B. 1, 2

C. 0, 2

D. 2

Solution

1. Step 1: Understand subscription behavior

   Subscribing logs the current value immediately, so 0 is logged first.

2. Step 2: Trace increments and logs

   Each increment increases the value by 1 and triggers the subscriber, logging 1 then 2.

3. Final Answer:

   0, 1, 2 -> Option A

4. Quick Check:

   Subscription logs initial and updates [OK]

Hint: Subscription logs initial value immediately [OK]

Common Mistakes:

• Ignoring initial subscription log
• Assuming increments log only final value
• Confusing update with set behavior

4. Identify the error in this custom store code:

import { writable } from 'svelte/store';
function createTimer() {
  const { subscribe, set } = writable(0);
  let interval = null;
  return {
    subscribe,
    start: () => {
      interval = setInterval(() => set(n + 1), 1000);
    },
    stop: () => clearInterval(interval)
  };
}

medium

A. Not clearing interval on stop

B. Missing update method for incrementing

C. Using set(n + 1) without defining n

D. Incorrect import of writable store

Solution

1. Step 1: Check the setInterval callback

   The callback uses set(n + 1) but n is not defined anywhere in scope.

2. Step 2: Understand correct usage

   To increment the value, update should be used or the current value tracked. Using set with undefined n causes an error.

3. Final Answer:

   Using set(n + 1) without defining n -> Option C

4. Quick Check:

   Undefined variable in set() causes error [OK]

Hint: Use update() or track value before set() [OK]

Common Mistakes:

• Using set() with undefined variable
• Forgetting to clear intervals
• Confusing set and update methods

5. You want to create a custom store that holds a list of items and provides a method to add unique items only (no duplicates). Which implementation correctly achieves this?

hard

A. import { writable } from 'svelte/store'; function createList() { const { subscribe, update } = writable([]); return { subscribe, add: (item) => update(list => [...list, item]) }; }

B. import { writable } from 'svelte/store'; function createList() { const { subscribe, set } = writable([]); return { subscribe, add: (item) => set(list => list.includes(item) ? list : [...list, item]) }; }

C. import { readable } from 'svelte/store'; function createList() { const { subscribe } = readable([]); return { subscribe, add: (item) => {} }; }

D. import { writable } from 'svelte/store'; function createList() { const { subscribe, update } = writable([]); return { subscribe, add: (item) => update(list => list.includes(item) ? list : [...list, item]) }; }

Solution

1. Step 1: Check method to add unique items

   import { writable } from 'svelte/store'; function createList() { const { subscribe, update } = writable([]); return { subscribe, add: (item) => update(list => list.includes(item) ? list : [...list, item]) }; } uses update and checks if the item exists before adding, preventing duplicates.

2. Step 2: Verify other options

   import { writable } from 'svelte/store'; function createList() { const { subscribe, set } = writable([]); return { subscribe, add: (item) => set(list => list.includes(item) ? list : [...list, item]) }; } incorrectly uses set with a function argument, which is invalid. import { readable } from 'svelte/store'; function createList() { const { subscribe } = readable([]); return { subscribe, add: (item) => {} }; } uses readable which is read-only. import { writable } from 'svelte/store'; function createList() { const { subscribe, update } = writable([]); return { subscribe, add: (item) => update(list => [...list, item]) }; } adds items without checking duplicates.

3. Final Answer:

   Custom store with update() and duplicate check -> Option D

4. Quick Check:

   Use update() and check includes() for uniqueness [OK]

Hint: Use update() with includes() check to avoid duplicates [OK]

Common Mistakes:

• Using set() with function argument
• Using readable store when write access needed
• Not checking for duplicates before adding