Manejo de Estado Global con Sustand en Aplicaciones React

¿Qué es Sustand y por qué es relevante para el manejo del estado global en aplicaciones?

Si alguna vez te has sentido abrumado por la complejidad de Redux, te alegrará saber que hay una librería que facilita el manejo del estado global de tus aplicaciones: Sustand. Esta librería ofrece una forma sencilla de gestionar el estado, lo que la hace ideal para proyectos de pequeña y mediana escala. A diferencia de Redux, Sustand no requiere un flujo complejo de comunicación entre el estado, los componentes y las acciones. En cambio, se centra en un estado inicial y un hook que te permite modificarlo.

¿Cómo empezar con Sustand?

Para poner en marcha un proyecto con Sustand, el primer paso es la instalación de la librería. Aquí te mostramos los pasos básicos que puedes seguir para crear una aplicación con Sustand:

1. Instalación inicial: Empieza creando tu proyecto, por ejemplo, puedes usar npm create vite y llamar a tu aplicación my-read-sustand-app. Luego, selecciona React TypeScript como plantilla.
2. Instalar Sustand: Una vez que tengas tu proyecto configurado, instala Sustand usando el comando de instalación proporcionado en la documentación oficial.
3. Configurar el Store: Ve a la carpeta src y crea un directorio llamado store. Allí, crearás un archivo useTodoStore.ts donde definirás tus tipos y funciones necesarias para manejar el estado.

¿Cómo se crea un Store y qué tipos se definen?

Para configurar el Store, importa create de Sustand y define los tipos necesarios para tu aplicación. En el ejemplo de una lista de tareas (todo list), necesitarás un tipo para "todo" y uno para el "store". Aquí te muestro cómo hacerlo:

import create from 'zustand';

type Todo = {
    id: number;
    text: string;
};

type TodoStore = {
    todos: Todo[];
    addTodo: (text: string) => void;
    removeTodo: (id: number) => void;
};

Una vez definidos los tipos, usa create para inicializar un Store que contendrá un array para las tareas (todos) y funciones para agregar y eliminar tareas.

¿Cómo usar funciones como addTodo y removeTodo en Sustand?

Dentro del Store, definirás funciones que permitan modificar el estado. La función addTodo añade nuevas tareas, mientras que removeTodo elimina tareas según su ID.

const useTodoStore = create<TodoStore>((set) => ({
    todos: [],
    addTodo: (text) => set(state => ({
        todos: [...state.todos, { id: state.todos.length + 1, text }]
    })),
    removeTodo: (id) => set(state => ({
        todos: state.todos.filter(todo => todo.id !== id)
    }))
}));

Ventajas de usar Sustand

La simplicidad es la clave del éxito de Sustand. Al eliminar la necesidad de un flujo complejo, te permite centrarte en lo esencial: definir el estado inicial y sus modificadores de una manera clara y concisa. Esto te ahorra tiempo y esfuerzo, lo que es especialmente útil si trabajas en aplicaciones que no requieren la robustez de Redux.

Consejos y recomendaciones para trabajar con Sustand

• Utiliza hooks personalizados: Crea hooks específicos para acceder y manipular el store desde tus componentes. Esto mantendrá tu código limpio y organizado.
• Aprovecha los tipos de TypeScript: Definir tipos claros aumenta la legibilidad de tu código y reduce errores.
• Revisa la documentación oficial: Sustand se encuentra en constante evolución, por lo que estar al tanto de sus actualizaciones es vital.

Anímate a explorar y seguir aprendiendo sobre Sustand. Con práctica y experimentación, puedes dominar el manejo de estados en tus aplicaciones de manera más eficiente. Recuerda que cada herramienta tiene su contexto y alcance, y Sustand podría ser tu mejor aliado en proyectos de recursos reducidos o medianos.