Context API vs stores in Svelte - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a writable store in Svelte.

Svelte

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

const count = [1](0);

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

Areadable

Bderived

Cwritable

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'readable' instead of 'writable' when you want to update the store.

Trying to import 'get' as a store creator.

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

2fill in blank

medium

Complete the code to set a context value in a Svelte component.

Svelte

import { setContext } from 'svelte';

setContext('[1]', 42);

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

Acount

Bvalue

Ccontext

Dkey

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable named 'value' instead of a key string.

Confusing the key with the actual value.

The first argument to setContext is a key string used to identify the context value.

3fill in blank

hard

Fix the error in this Svelte code to get a context value.

Svelte

import { getContext } from 'svelte';

const value = getContext([1]);

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

A'count'

B42

Ccount

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a number or variable instead of the key string.

Forgetting to quote the key string.

The key passed to getContext must be the same string or symbol used in setContext.

4fill in blank

hard

Fill both blanks to create a derived store from a writable store.

Svelte

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

const count = writable(1);
const doubled = [2](count, n => n * 2);

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

Aderived

Bwritable

Creadable

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'writable' instead of 'derived' for computed stores.

Trying to use 'get' as a store creator.

The derived function creates a store based on other stores, here doubling the count.

5fill in blank

hard

Fill all three blanks to use a store value inside a Svelte component with reactive syntax.

Svelte

<script>
  import { [1] } from 'svelte/store';
  import { count } from './stores.js';

  $: doubled = $[2] * 2;

  function increment() {
    [3].update(n => n + 1);
  }
</script>

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

Awritable

Bcount

Dderived

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the $ prefix to access store values.

Using the wrong variable name for the store.

Import writable to create stores, use $count to access the store value reactively, and call count.update to change it.