Custom Writable Stores with Encapsulated Logic

Snippet

Custom Writable Stores with Encapsulated Logic

Custom stores allow you to hide the internal 'set' and 'update' methods, exposing only domain-specific actions. This prevents external components from setting invalid states and keeps logic centralized.

snippet.js
javascript
import { writable } from 'svelte/store';
 
function createCounter() {
  const { subscribe, set, update } = writable(0);
 
  return {
    subscribe,
    increment: () => update(n => n + 1),
    decrement: () => update(n => n - 1),
    reset: () => set(0)
  };
}
 
export const counter = createCounter();

svelte

Breakdown

const { subscribe, set, update } = writable(0);

Destructure the store methods from a new writable store initialized at 0.

return { subscribe, increment: ... }

Return an object that includes 'subscribe' but replaces 'set' and 'update' with specific methods.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Custom Writable Stores with Encapsulated Logic

Related