like ? likeCount.update(n => n + 1) : likeCount.update(n => n - 1);
Introducción
Para qué sirve Svelte y qué aprenderas sobre él
¿Qué es Svelte?
Elementos básicos de Svelte
Primeros pasos
Estilos
Componentes
Reactividad
Props
Condicionales
Estructura de control: each
Eventos del DOM y Binding
Ciclo de vida
Stores
Configuración del proyecto
Presentación de Pugstagram
Configurar el entorno de trabajo
Servidor de desarrollo local
Desarrollo de la aplicación
Estructura
Componentes Header y Sidebar
Componente Timeline
Estilos de nuestra aplicación
Conectar nuestra aplicación a una API
Componente Comments
Componente Modal
Header Likes
Deployment
Despliegue en Netlify
Continúa con el Curso de Sapper
Apuntes de Svelte
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Integrar funcionalidades como los "likes" o "bookmarks" puede añadir un toque interactivo a cualquier aplicación web, similar a las redes sociales modernas como Instagram. En este artículo, aprenderás cómo implementarlas en una aplicación Svelte, gestionando el estado de forma eficiente con Svelte Store.
Iniciaremos añadiendo variables necesarias para los "likes" y "bookmarks". Este proceso implica crear variables booleanas en el archivo Svelte:
let like = false;
let bookmark = false;
Estas variables mantendrán el estado de los "likes" y "bookmarks" para cada publicación.
El siguiente paso es implementar una función que altere el estado de la variable like
cuando un usuario interactúa con el botón de corazón.
function handleLike() {
like = !like;
}
Esta función cambia el estado del "like" de false
a true
o viceversa, similar a como se gestiona en un modal.
Para reflejar estos cambios en la interfaz de usuario (UI), añade un evento on:click
al ícono que desencadena la acción de like:
<icon-heart on:click={handleLike} class:active-like={like}></icon-heart>
La clase active-like
se añade dinámicamente cuando like
es verdadero, permitiendo modificar estilos en CSS según el estado actual.
Para los bookmarks, se aplica una lógica similar, utilizando una función anónima directamente en el evento on:click
.
<icon-bookmark on:click={() => bookmark = !bookmark} class:active-bookmark={bookmark}></icon-bookmark>
Este enfoque muestra cómo implementar funcionalidad sin necesidad de funciones separadas.
Tal como en Instagram, puedes activar el "like" haciendo doble clic sobre una imagen. Esto se configura utilizando el evento on:dblclick
de Svelte:
<figure on:dblclick={handleLike}>
<img src="ruta/a/la/imagen.jpg" alt="Imagen">
</figure>
El doble clic invoca a la misma función handleLike
, propiciando un efecto fluido y consistente en la aplicación.
Para contar cuántas publicaciones han sido "liked", usa Svelte Store para compartir estado entre componentes.
Primero, crea un archivo store.js
dentro de una nueva carpeta llamada store
. Allí, importa el método writable
de Svelte para definir un estado:
import { writable } from 'svelte/store';
export const likeCount = writable(0);
Este store mantiene un contador que se actualiza cada vez que se da o quita un "like".
Dentro del componente que gestiona los likes, importa el store y actualiza su valor en la función handleLike
:
import { likeCount } from '../store/store';
function handleLike() {
if (like) {
likeCount.update(n => n - 1);
} else {
likeCount.update(n => n + 1);
}
like = !like;
}
Con update
, incrementas o decrementas el contador según el estado actual de like
.
En el componente del header
, importa el store para mostrar el contador dinámicamente:
import { likeCount } from '../store/store';
$: displayLikeCount = $likeCount > 0 ? $likeCount : '';
Al usar $
antes del nombre del store, Svelte otorga reactividad, actualizando automáticamente la vista cuando el estado cambia.
Como tarea adicional, se sugiere subir tu aplicación a un repositorio en línea, como GitHub, GitLab o Bitbucket. Esto no solo respaldará tu progreso, sino que también te preparará para futuros despliegues en la nube.
Con estos pasos, tu aplicación ahora ofrece interactividad atractiva y eficiente. ¡Sigue explorando y añadiendo nuevas funcionalidades para mejorar aún más tu proyecto!
Aportes 8
Preguntas 5
like ? likeCount.update(n => n + 1) : likeCount.update(n => n - 1);
Quisiera compartir esta forma de comparación con el operador ternarios es básicamente igual pero entiendo que es más simple.
{$likeCount ? $likeCount : ''}
Eso es siempre y cuando no quiere realizar alguna comparación en específico como por ejemplo mostrarlo solamente cuando sean mayor a 5.
function handleLike() {
like = !like;
if(like){
likeCount.update( n => n ++);
}else{
likeCount.update( n => n --);
}
}
Por qué no funcionó el ++ y el – ?
También puedes acceder a la variable del store con el prefijo $, veamos un ejemplo:
if (isLike) {
$likeCount++;
} else {
$likeCount--;
}
No sé que pasó🤔
Demonios! Antes de ver el “dbclick” pensé que iba a hacer una lógica de contador con el evento click. Buen Dato!
Muy buena clase. Ya se soluciono la duda que tenia con clases en Svelte, ahora me gustaria ver como se implementaria Redux
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?