Why stores manage shared state in Svelte - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the writable store from Svelte.

Svelte

import { [1] } from 'svelte/store';

Drag options to blanks, or click blank then click option'

Aderived

Breadable

Cstore

Dwritable

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'readable' instead of 'writable' because readable stores cannot be updated.

The writable function creates a store that can be updated and subscribed to.

2fill in blank

medium

Complete the code to create a writable store with initial value 0.

Svelte

const count = [1](0);

Drag options to blanks, or click blank then click option'

Awritable

Bderived

Creadable

Dstore

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'readable' which creates a store that cannot be updated.

The writable function creates a store that holds a value and can be updated.

3fill in blank

hard

Fix the error in the code to subscribe to the store and log its value.

Svelte

count.[1](value => console.log(value));

Drag options to blanks, or click blank then click option'

Aupdate

Bset

Csubscribe

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'set' or 'update' which change the value instead of listening.

The subscribe method listens for changes and runs the callback with the current value.

4fill in blank

hard

Fill both blanks to update the store value by adding 1.

Svelte

count.[1](n => n [2] 1);

Drag options to blanks, or click blank then click option'

Aupdate

B+

C-

Dset

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'set' instead of 'update' when needing to base on current value.

The update method takes a function to change the current value. Adding 1 increases the count.

5fill in blank

hard

Fill all three blanks to create a derived store that doubles the count value.

Svelte

import { derived } from 'svelte/store';
const double = derived(count, [1] => [2] * 2);

// To get the value use double.[3](v => console.log(v));

Drag options to blanks, or click blank then click option'

An

Csubscribe

Dset

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'set' instead of 'subscribe' to listen to store changes.

The derived store uses a function with parameter n (the count value) and returns n * 2. To listen to changes, use subscribe.