Derived stores in Svelte - Mini Project: Build & Apply

Using Derived Stores in Svelte

📖 Scenario: You are building a simple Svelte app that tracks the number of items in a shopping cart and calculates the total price automatically.

🎯 Goal: Create a Svelte app that uses a writable store for the cart items and a derived store to calculate the total price. The total price updates automatically when the cart changes.

📋 What You'll Learn

Create a writable store called cart with initial items and prices

Create a derived store called totalPrice that calculates the sum of item prices in cart

Use the cart and totalPrice stores in a Svelte component to display the items and total

Update the total price automatically when cart changes

💡 Why This Matters

🌍 Real World

Derived stores help keep related data in sync automatically, like calculating totals or filtered lists in shopping carts or dashboards.

💼 Career

Understanding derived stores is key for building reactive, maintainable Svelte apps that update UI automatically when data changes.

1

Create the initial cart store

Create a writable store called cart with these exact items: an array of objects with { id: 1, name: 'Apple', price: 1.5 } and { id: 2, name: 'Banana', price: 0.9 }.

Svelte

# Your code here to create the cart store

Hint

Use writable from svelte/store and assign the array with the two objects to cart.

2

Create a derived store for total price

Import derived from svelte/store and create a derived store called totalPrice that depends on cart and calculates the sum of all price values in cart.

Svelte

import { writable, derived } from 'svelte/store';

export const cart = writable([
  { id: 1, name: 'Apple', price: 1.5 },
  { id: 2, name: 'Banana', price: 0.9 }
]);

# Your code here to create the derived totalPrice store

Hint

Use derived(cart, $cart => ...) and inside use reduce to sum prices.

3

Display cart items and totalPrice in a Svelte component

In a Svelte component, import cart and totalPrice stores. Use {$cart} to loop over items and show each name and price. Below, show the total price using {$totalPrice}.

Svelte

import { cart, totalPrice } from './stores.js';

# Your code here to display cart items and totalPrice



  

Total: $

Hint

Use {#each $cart as item} to loop and {$totalPrice} to show total.

4

Add a button to add a new item and update total automatically

Add a button that, when clicked, adds a new item { id: 3, name: 'Orange', price: 1.2 } to the cart store using its update method. The totalPrice should update automatically.

Svelte

import { cart, totalPrice } from './stores.js';

# Your code here to add a function that adds the new item



  {#each $cart as item}
    {item.name}: ${item.price}
  {/each}

Total: ${$totalPrice}

Add Orange

Hint

Use cart.update to add the new item inside the addOrange function and bind it to the button's on:click.

Practice

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

easy

A. To create a new store that automatically updates based on other stores

B. To store static values that never change

C. To replace writable stores with simpler syntax

D. To handle user input events directly

Solution

1. Step 1: Understand what derived stores do

   Derived stores create new values that depend on one or more other stores.

2. Step 2: Identify the main purpose

   They automatically update when the original stores change, reflecting combined or transformed data.

3. Final Answer:

   To create a new store that automatically updates based on other stores -> Option A

4. Quick Check:

   Derived stores update automatically = B [OK]

Hint: Derived stores react to other stores' changes automatically [OK]

Common Mistakes:

• Thinking derived stores hold static values
• Confusing derived with writable stores
• Believing derived stores handle events

2. Which of the following is the correct syntax to create a derived store from two stores a and b?

easy

A. const c = derived(a, b, (a, b) => a + b);

B. const c = derived([a, b], ([$a, $b]) => $a + $b);

C. const c = derived(a, (a, b) => a + b);

D. const c = derived([a, b], (a, b) => a + b);

Solution

1. Step 1: Recall derived store syntax

   Derived stores take an array of stores and a callback with destructured values.

2. Step 2: Match correct syntax

   The callback receives an array destructured as [$a, $b] to access current values.

3. Final Answer:

   const c = derived([a, b], ([$a, $b]) => $a + $b); -> Option B

4. Quick Check:

   Array + destructured callback = A [OK]

Hint: Use array and destructure values in derived callback [OK]

Common Mistakes:

• Passing stores as separate arguments instead of array
• Not destructuring the values in callback
• Using wrong parameter order in callback

3. Given the following code, what will be logged to the console after a.set(3) is called?

import { writable, derived } from 'svelte/store';
const a = writable(1);
const b = writable(2);
const sum = derived([a, b], ([$a, $b]) => $a + $b);
sum.subscribe(value => console.log(value));
a.set(3);

medium

A. 1, 2, 3

B. 3, 2, 5

C. 3, 5, 5

D. 3, 5

Solution

1. Step 1: Understand initial subscription output

   When subscribing, the current derived value is logged immediately: 1 + 2 = 3.

2. Step 2: Update store a to 3 and check derived value

   After a.set(3), derived recalculates: 3 + 2 = 5, which is logged.

3. Final Answer:

   3, 5 -> Option D

4. Quick Check:

   Initial + updated sum = 3, 5 [OK]

Hint: Derived logs initial and updated values on subscription [OK]

Common Mistakes:

• Expecting multiple logs before subscription
• Confusing store values with derived values
• Missing initial subscription log

4. What is wrong with this derived store code?

import { writable, derived } from 'svelte/store';
const count = writable(0);
const double = derived(count, value => value * 2, 0);

medium

A. There is no error; this code is correct

B. The callback function should destructure the value as an array

C. The derived store must be created from an array of stores, not a single store

D. The third argument (0) is invalid for derived stores

Solution

1. Step 1: Check derived store syntax for single store

   Derived stores can take a single store and a callback with the value directly.

2. Step 2: Understand the third argument

   The third argument is the initial value before the first store value arrives, which is valid.

3. Final Answer:

   There is no error; this code is correct -> Option A

4. Quick Check:

   Single store + initial value allowed = A [OK]

Hint: Single store derived can have initial value as third argument [OK]

Common Mistakes:

• Thinking callback must destructure array always
• Believing derived needs array even for one store
• Assuming third argument is invalid

5. You have two writable stores: firstName and lastName. You want to create a derived store fullName that updates automatically and trims whitespace from both names before combining. Which code correctly implements this?

hard

A. const fullName = derived([firstName, lastName], (firstName, lastName) => firstName.trim() + ' ' + lastName.trim());

B. const fullName = derived([firstName, lastName], ([$firstName, $lastName]) => $firstName + ' ' + $lastName);

C. const fullName = derived([firstName, lastName], ([$firstName, $lastName]) => `${$firstName.trim()} ${$lastName.trim()}`);

D. const fullName = derived(firstName, $firstName => $firstName.trim() + ' ' + lastName);

Solution

1. Step 1: Use array of stores and destructure values

   Derived stores with multiple sources require an array and destructuring in the callback.

2. Step 2: Trim both values before combining

   Use trim() on both $firstName and $lastName before concatenation.

3. Final Answer:

   const fullName = derived([firstName, lastName], ([$firstName, $lastName]) => `${$firstName.trim()} ${$lastName.trim()}`); -> Option C

4. Quick Check:

   Array + destructure + trim both = D [OK]

Hint: Destructure array stores and trim inside derived callback [OK]

Common Mistakes:

• Not trimming both names
• Passing stores separately, not as array
• Not destructuring values in callback