Cómo manejar arrays con Zustand en React
Zustand proporciona un enfoque declarativo para manejar arrays dentro del estado global. Puedes definir un array en el estado inicial y luego crear funciones para interactuar con él. Estas funciones pueden incluir la adición de nuevos elementos, la actualización de elementos existentes, o la eliminación de elementos específicos.
Ejemplo básico
En este ejemplo, crearemos una tienda con Zustand para manejar un array de tareas:
import create from 'zustand';
const useTaskStore = create((set) => ({
tasks: [], // Estado inicial del array
addTask: (task) => set((state) => ({ tasks: [...state.tasks, task] })),
removeTask: (id) =>
set((state) => ({ tasks: state.tasks.filter((task) => task.id !== id) })),
updateTask: (id, updatedTask) =>
set((state) => ({
tasks: state.tasks.map((task) =>
task.id === id ? { ...task, ...updatedTask } : task
),
})),
}));
export default useTaskStore;Explicación del código
1. Estado inicial: Definimos tasks como un array vacío.
2. Agregar elementos: La función addTask usa el operador de propagación (...) para agregar un nuevo elemento al array.
3. Eliminar elementos: La función removeTask utiliza filter para crear un nuevo array sin el elemento con el ID especificado.
4. Actualizar elementos: La función updateTask usa map para buscar el elemento correspondiente por su ID y actualizarlo.
Implementación en un componente React
import React from 'react';
import useTaskStore from './useTaskStore';
function TaskManager() {
const { tasks, addTask, removeTask, updateTask } = useTaskStore();
return (
<div>
<button
onClick={() =>
addTask({ id: Date.now(), name: 'Nueva Tarea', completed: false })
}
>
Agregar Tarea
</button>
<ul>
{tasks.map((task) => (
<li key={task.id}>
{task.name}
<button onClick={() => removeTask(task.id)}>Eliminar</button>
<button
onClick={() =>
updateTask(task.id, { name: 'Tarea Actualizada' })
}
>
Actualizar
</button>
</li>
))}
</ul>
</div>
);
}
export default TaskManager;Algunos ejemplos de uso
1. Gestión de productos en un carrito de compras.
Utiliza un array para almacenar productos y maneja operaciones como agregar o eliminar elementos.
2. Control de listas dinámicas.
Útil en aplicaciones como listas de tareas o listas de reproducción.
Jorge García
Fullstack developer