React 19 de Cero a Experto / Estado global

Reto: Mi Bolsillo con estado global

Reto40 min60 XP

Cierras el módulo de estado global montando una "Mi Bolsillo" donde el estado vive en un STORE COMPARTIDO y varios componentes independientes —formulario, lista, total, filtro— lo leen y lo cambian SIN pasarse una sola prop ni sufrir prop drilling. Usarás el patrón store + hook que construiste en la lección de Zustand, aplicado a una app completa. Es la culminación de todo el módulo: el estado en su sitio, los componentes desacoplados.

Reto

Mi Bolsillo global

Media35 min60 XP(×2 sin mirar la solución)

Qué debes construir

Una "Mi Bolsillo" cuyo estado vive en un store global compartido:

Un store (con tu crearStore + useStore, o con Context + useReducer) que guarde gastos y filtro, con acciones agregar, borrar y setFiltro.
Componentes independientes que consuman el store sin recibir props entre ellos: un Form para agregar, una Lista (que muestra los gastos filtrados), un Filtro (select de categoría), y un Resumen (total + conteo).
Sin prop drilling: ningún componente pasa el estado a otro; cada uno lee del store lo que necesita.
Lo derivado se calcula: la lista filtrada y el total se DERIVAN en el render, no se guardan.

Reglas

El store vive FUERA de los componentes; las actualizaciones son inmutables.
Cada componente se suscribe SOLO a la parte del store que usa (selector).
Todo tipado con TypeScript; categorías como unión de literales ("comida" | "transporte" | "ocio").

35:00

Cuando estés listo, arranca el reloj.

Lo que este reto consolida:

El store desacopla los componentes. Form, Lista, Filtro y Resumen no se conocen entre sí ni se pasan nada: cada uno habla con el store. Podrías moverlos a cualquier parte del árbol y seguirían funcionando. Ese desacople es el premio del estado global bien usado.
Selectores = re-renders precisos. Cada componente se suscribe solo a su parte, así que cambiar el filtro no obliga a re-renderizar el formulario.
Lo derivado se calcula. La lista visible y el total salen del estado en el render —una fuente de verdad (los gastos), todo lo demás derivado—.

Autoevaluación: agrega gastos, filtra por categoría, borra —¿todo funciona con los componentes comunicándose SOLO a través del store, sin una sola prop entre ellos? ¿la lista filtrada y el total se DERIVAN (no son estado)? Nota lo desacoplados que están: Form no sabe que existe Lista, Filtro no sabe de Resumen —solo comparten el store—. Ese es el estado global bien aplicado: componentes independientes que colaboran a través de una fuente de verdad común. Compara con el reto del módulo 2, donde todo el estado vivía en un App gigante que pasaba props a todos: aquí cada pieza es autónoma.

Qué sigue

Módulo 6 conquistado: dominas el estado global —prop drilling, Context, Zustand, XState— y sobre todo el CRITERIO para elegir cada uno. Ya tienes componentes, estado, efectos, datos y estado global: las piezas de una app real. Lo que falta es unirlas en PANTALLAS navegables. El módulo 7 trae el ROUTING con React Router: rutas, layouts anidados, parámetros de URL y rutas protegidas.