Store contract (subscribe method) in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to subscribe to a Svelte store and log its value.

Svelte

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

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

Asubscribe

Bset

Cupdate

Ddispatch

Attempts:

3 left

💡 Hint

Common Mistakes

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

The subscribe method is used to listen to changes in a Svelte store.

2fill in blank

medium

Complete the code to unsubscribe from a Svelte store subscription.

Svelte

const unsubscribe = myStore.subscribe(() => {});
unsubscribe[1];

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

A;

B{}

C[]

D()

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to add parentheses when calling the unsubscribe function.

The unsubscribe function returned by subscribe must be called as a function to stop listening.

3fill in blank

hard

Fix the error in the subscribe callback parameter to correctly receive the store value.

Svelte

myStore.subscribe([1] => {
  console.log([1]);
});

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

Avalue

B()

Cstore

Devent

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving the callback parameter empty or using incorrect parameter names.

The callback receives the current store value as its first argument, commonly named value.

4fill in blank

hard

Fill both blanks to create a custom store with a subscribe method that calls the subscriber immediately.

Svelte

function createStore() {
  return {
    subscribe: function([1]) {
      [2]('hello');
      return () => {};
    }
  };
}

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

Arun

Bsubscriber

Cnotify

Dcallback

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the parameter and the function call.

The subscribe method takes a subscriber function and calls it immediately with the current value.

5fill in blank

hard

Fill all three blanks to implement a store with subscribe, set, and update methods following the Svelte store contract.

Svelte

function createCounter() {
  let count = 0;
  const subscribers = new Set();

  function notify() {
    subscribers.forEach([1] => [2](count));
  }

  return {
    subscribe([3]) {
      subscribers.add([3]);
      [3](count);
      return () => subscribers.delete([3]);
    },
    set(value) {
      count = value;
      notify();
    },
    update(fn) {
      count = fn(count);
      notify();
    }
  };
}

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

Asubscriber

Bcallback

Cfn

Dlistener

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the subscriber parameter in different places.

Not calling the subscriber immediately after adding it.

The subscribe method adds a subscriber function to the set and calls it immediately with the current value. The notify function calls each subscriber with the updated count.