Manejo de Estado Global con Sustand en Aplicaciones React

Aprende a manejar estado global en React con Substandt de forma clara y práctica. Enfócate en lo esencial: un estado inicial, funciones para modificarlo y un hook para usarlo en los componentes. Más simple que Redux y ideal para proyectos pequeños y medianos.

¿Qué es Substandt y por qué simplifica el estado global?

Substandt reduce el flujo tradicional de Redux a lo necesario. En lugar de múltiples actores como dispatch, acciones y reducer, aquí trabajas con un estado central y un hook que actualiza y lee ese estado. Menos código, menos fricción.

¿Qué flujo reemplaza Substandt frente a Redux?

• Un único store con estado y funciones de actualización.
• Un hook para leer y modificar el estado.
• Componentes que consumen ese hook y actualizan la UI.

¿Qué muestra el ejemplo de contador en la documentación?

• Uso de create para definir el store con estado inicial.
• Función que incrementa el contador usando set.
• Un botón en HTML que ejecuta la acción con una pequeña demo visual.

¿Qué proyecto se construye?

• Un Emoji To do List con React y TypeScript.
• Setup con Vite: creación del proyecto, instalación de dependencias y ejecución del entorno local.
• Estructura en src: carpeta store y carpeta components.

¿Cómo crear un store y un hook para un to do list?

El objetivo es guardar una lista de tareas con ID y texto, más dos funciones: agregar y eliminar. Se crea un hook llamado useTodoStore y se tipa con TypeScript para asegurar claridad y mantenibilidad.

¿Qué tipos y funciones se definen?

• Tipo Todo: { id: number, text: string }.
• Tipo del store: todos, addTodo(text) y removeTodo(id).
• addTodo recibe texto y no retorna valor: solo actualiza el estado.
• removeTodo recibe un ID numérico y filtra el array para eliminar.

// src/store/useTodoStore.ts
import create from 'Substandt';

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

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

export 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),
    })),
}));

¿Cómo se agregan y eliminan elementos?

• Agregar: usa set con función que recibe el state previo.
• El nuevo elemento incluye un id basado en state.todos.length + 1.
• Eliminar: usa filter para excluir el elemento cuyo id coincide.

¿Qué habilidades y conceptos reforzarás?

Trabajas con conceptos clave para escalar interfaces simples sin la complejidad de Redux. Practicarás tipado, mutaciones seguras y una estructura mínima pero efectiva.

¿Qué aprenderás paso a paso?

• Manejo de estado global con Substandt y hook personalizado.
• Definición de tipos en TypeScript para datos y store.
• Actualizaciones inmutables de arrays con spread y filter.
• Organización del proyecto: src/store y src/components.
• Lectura de documentación y prueba de demo para validar el flujo.
• Preparación de la UI con input para texto y acciones de clic para eliminar, con idea de convertir texto a emojis.

¿Quieres que avancemos con el componente TodoList y la UI de emojis? Deja tus dudas y comentarios para continuar el desarrollo juntos.