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.
