Exploring Svelte Store: Writable, Readable, and Derived

Section 1: Writable — Managing State in Svelte Store

Svelte is a popular JavaScript framework known for its simplicity and efficient handling of state management. The Svelte Store is a powerful tool for managing the state of your applications. This article will explore three critical concepts in Svelte Store: Writable, Readable, and Derived.

Writable Stores

Writable stores in Svelte create and manage mutable states that can be updated from various parts of your application. They act as a single source of truth for your data, making sharing and updating state across components easy.

Here’s a simple example of how to create and use a writable store in Svelte:

<script>
  import { writable } from 'svelte/store';

  // Create a writable store with an initial value
  const count = writable(0);

  // Subscribe to changes in the store
  const unsubscribe = count.subscribe(value => {
    console.log('Count:', value);
  });

  // Update the store value
  count.set(5);

  // Unsubscribe when no longer needed
  unsubscribe();
</script>

In this code, we import the writable function from the ‘svelte/store’ package and create a writable store called count with an initial value of 0. We then subscribe to changes in the store and update its value with count.set(5).

Section 2: Readable — Accessing State Safely

While writable stores allow you to modify a state, readable stores provide a way to access and observe that state without the ability to modify it. This is useful for scenarios where you want to ensure data consistency and prevent unintended changes.

Readable Stores

Here’s a simple example of how to create and use a readable store in Svelte:

<script>
  import { readable } from 'svelte/store';

  // Create a readable store with an initial value
  const message = readable('Hello, Svelte!');

  // Subscribe to changes in the store
  const unsubscribe = message.subscribe(value => {
    console.log('Message:', value);
  });
</script>

In this code, we use the readable function to create a readable store called message with an initial value. We then subscribe to changes in the store and log the message value whenever it changes. You must note that you cannot update a readable store directly.

Section 3: Derived — Computed State in Svelte

Derived stores allow you to compute new values based on one or more other stores. These derived stores automatically update whenever the dependencies change, making them perfect for creating computed states in your Svelte applications.

Derived Stores

Here’s an example of how to create and use a derived store in Svelte:

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

  // Create two writable stores
  const width = writable(10);
  const height = writable(5);

  // Create a derived store that calculates area
  const area = derived([width, height], ([$width, $height]) => $width * $height);

  // Subscribe to changes in the derived store
  const unsubscribe = area.subscribe(value => {
    console.log('Area:', value);
  });

  // Update the width and height
  width.set(12);
  height.set(6);
</script>

In this code, we create two writable stores for width and height. Then, we make a derived store called area that computes the area based on the width and height values. The derived store updates automatically when its dependencies change, as demonstrated by the log output when we update width and height.

In summary, Svelte Store provides a powerful and flexible way to manage the state in Svelte applications. Writable stores allow you to create a mutable state, readable stores offer a way to access the state safely, and derived stores enable you to compute new values from the existing state. These features make Svelte Store a valuable tool for building efficient and maintainable applications.

In Upscalix, we always try to use the newest technology and trend to make digital solution for our client.

This article is written by Rendy, Upscalix Tech Lead.