Svelte Store avec Svelte : guide complet
Pourquoi Svelte Store avec Svelte : guide complet ?
- Contexte réel : Dans un environnement moderne, la gestion de l'état global d'une application devient une nécessité croissante. L'utilisation de bibliothèques comme Svelte Store permet aux développeurs de gérer efficacement et de manière déclarative les états de leurs applications.
- Un cas d'usage concret : Considérons une application de gestion de tâches. Toutes les parties de l'application doivent avoir accès à la liste des tâches en cours, ainsi que le pouvoir de modifier cette liste.
Prérequis
- Connaissances en Svelte (v3 ou plus)
- Node.js et npm installés (version >= 14.0.0)
Concepts fondamentaux
1. State Management with Svelte Store
Svelte Store est une bibliothèque simple pour gérer l'état de votre application. Elle permet d'ajouter un store à votre application et de le partager entre les composants.
// src/stores.js
import { writable } from 'svelte/store';
export const tasks = writable([]);
2. Reading and Writing to the Store
Vous pouvez lire et modifier l'état du store en utilisant les fonctions subscribe, set, et update.
// src/App.svelte
<script>
import { tasks } from './stores.js';
let newTask = '';
function addTask() {
tasks.update(t => [...t, newTask]);
newTask = '';
}
tasks.subscribe(tasksList => {
console.log('Tasks updated:', tasksList);
});
</script>
<input bind:value={newTask} placeholder="Add a task" />
<button on:click={addTask}>Add Task</button>
3. Deriving Values from the Store
Vous pouvez créer des valeurs dérivées à partir de l'état du store en utilisant la fonction derived.
// src/stores.js
import { writable } from 'svelte/store';
import { derived } from 'svelte/store';
export const tasks = writable([]);
export const incompleteTasks = derived(tasks, $tasks => $tasks.filter(task => !task.completed));
4. Creating a Store with Default Value
Vous pouvez initialiser un store avec une valeur par défaut en utilisant la fonction writable.
// src/stores.js
import { writable } from 'svelte/store';
export const settings = writable({
theme: 'light',
notifications: true
});
5. Creating a Store with Derived State
Vous pouvez créer un store avec des états dérivés en utilisant la fonction derived.
// src/stores.js
import { writable } from 'svelte/store';
import { derived } from 'svelte/store';
export const tasks = writable([]);
export const completedTasksCount = derived(tasks, $tasks => $tasks.filter(task => task.completed).length);
Mise en pratique : Projet fil rouge
1. Créer un nouveau projet Svelte
npx degit sveltejs/template svelte-store-todo
cd svelte-store-todo
npm install
2. Configurer les Stores
Créez un fichier src/stores.js pour gérer l'état de la liste des tâches.
// src/stores.js
import { writable } from 'svelte/store';
export const tasks = writable([]);
3. Créer le Composant principal
Modifiez src/App.svelte pour utiliser les stores.
<!-- src/App.svelte -->
<script>
import { tasks } from './stores.js';
let newTask = '';
function addTask() {
tasks.update(t => [...t, { text: newTask, completed: false }]);
newTask = '';
}
</script>
<input bind:value={newTask} placeholder="Add a task" />
<button on:click={addTask}>Add Task</button>
4. Afficher la liste des tâches
Ajoutez un composant pour afficher la liste des tâches.
<!-- src/App.svelte -->
<script>
import { tasks } from './stores.js';
let newTask = '';
function addTask() {
tasks.update(t => [...t, { text: newTask, completed: false }]);
newTask = '';
}
</script>
<input bind:value={newTask} placeholder="Add a task" />
<button on:click={addTask}>Add Task</button>
<ul>
{#each $tasks as task (task.text)}
<li>{task.text}</li>
{/each}
</ul>
5. Ajouter la possibilité de marquer une tâche comme terminée
Modifiez le composant pour ajouter un bouton pour chaque tâche.
<!-- src/App.svelte -->
<script>
import { tasks } from './stores.js';
let newTask = '';
function addTask() {
tasks.update(t => [...t, { text: newTask, completed: false }]);
newTask = '';
}
function toggleCompleted(task) {
tasks.update(t =>
t.map(currentTask =>
currentTask.text === task.text ? { ...currentTask, completed: !currentTask.completed } : currentTask
)
);
}
</script>
<input bind:value={newTask} placeholder="Add a task" />
<button on:click={addTask}>Add Task</button>
<ul>
{#each $tasks as task (task.text)}
<li>
<span>{task.text}</span>
<button on:click={() => toggleCompleted(task)}>Toggle Completed</button>
</li>
{/each}
</ul>
Erreurs fréquentes et debugging
1. Mauvaise utilisation de la fonction set
// ❌ Mauvais
tasks.set(tasks + [newTask]);
// ✅ Correct
tasks.update(t => [...t, newTask]);
2. Erreur de syntaxe dans le subscribe
// ❌ Mauvais
tasks.subscribe(function($tasks) {
console.log('Tasks updated:', $tasks);
});
// ✅ Correct
tasks.subscribe($tasks => {
console.log('Tasks updated:', $tasks);
});
3. Erreur de typage dans le store
// ❌ Mauvais
export const tasks = writable([]);
// ✅ Correct
export const tasks = writable([]);
Pour aller plus loin
1. Utiliser les hooks avec Svelte Store
Apprenez à utiliser des hooks personnalisés pour gérer l'état global.
2. Optimiser la performance avec derived
Explorez comment utiliser des états dérivés pour optimiser le rendu de votre application.
3. Intégrer Svelte Store avec d'autres bibliothèques
Apprenez à combiner Svelte Store avec d'autres bibliothèques populaires comme Redux ou MobX.
Défi pratique : Créer un gestionnaire de notes
Créez une application simple pour gérer des notes en utilisant Svelte Store. L'application devrait permettre d’ajouter, de modifier et de supprimer des notes.
npx degit sveltejs/template svelte-store-notes
cd svelte-store-notes
npm install
Commencez par créer un fichier src/stores.js pour gérer l'état des notes. Ensuite, créez le composant principal pour ajouter, modifier et supprimer des notes.
En vous appuyant sur les concepts que nous avons abordés dans ce tutoriel, vous devriez être en mesure de réaliser un gestionnaire de notes complet avec Svelte Store.