Snippet

Fortgeschrittener Custom Store mit memoisiertem Invaliderungsschutz

Eigene Svelte-Stores können optimiert werden, indem das Standardverhalten von set/update überschrieben wird. Durch die Implementierung einer memoisierten Vergleichsfunktion verhindern wir unnötige reaktive Trigger und nachgelagerte Komponenten-Re-renders, wenn sich die Datenstruktur nicht effektiv geändert hat, was besonders bei komplexen verschachtelten Objekten entscheidend ist.

snippet.js

javascript

import { writable } from 'svelte/store';
 
export function createMemoStore(initialValue, compareFn = (a, b) => JSON.stringify(a) === JSON.stringify(b)) {
  const { subscribe, set, update } = writable(initialValue);
  let currentValue = initialValue;
 
  return {
    subscribe,
    set: (newValue) => {
      if (!compareFn(currentValue, newValue)) {
        currentValue = newValue;
        set(newValue);
      }
    },
    update: (fn) => {
      const newValue = fn(currentValue);
      if (!compareFn(currentValue, newValue)) {
        currentValue = newValue;
        set(newValue);
      }
    }
  };
}

svelte

Erklärung

compareFn = (a, b) => ...

Ermöglicht die Definition einer eigenen Gleichheitslogik, wie z.B. Tiefenvergleich oder ID-basierte Prüfungen.

if (!compareFn(currentValue, newValue))

Unterbricht die Store-Benachrichtigung, wenn der neue Wert funktional identisch mit dem aktuellen ist.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Experten →

Fortgeschrittener Custom Store mit memoisiertem Invaliderungsschutz

Verwandt