Quiz: Navegación y gestión de estado en React Native

Tipo de lección: Quiz

Concepto clave

La navegación y gestión de estado son dos pilares fundamentales en el desarrollo de apps móviles con React Native. Imagina que tu app es una ciudad: la navegación son las calles y avenidas que conectan diferentes barrios (pantallas), mientras que el estado es la información que los ciudadanos (componentes) comparten entre sí, como noticias o eventos. Sin una buena planificación de calles, los usuarios se pierden; sin un sistema eficiente para compartir información, la app se vuelve caótica.

En React Native con Expo, usamos bibliotecas como React Navigation para la navegación y Redux o Context API para el estado. La navegación maneja cómo los usuarios se mueven entre pantallas, usando stacks, tabs o drawers. La gestión de estado controla datos que múltiples componentes necesitan, como el perfil del usuario o configuraciones de la app. Combinarlos bien es clave para apps escalables y mantenibles.

Cómo funciona en la práctica

Vamos a crear una app simple de tareas para ver la navegación y gestión de estado en acción. Primero, instala las dependencias: expo install @react-navigation/native @react-navigation/stack react-redux redux. Luego, estructura tu proyecto con estas carpetas: screens/ para pantallas, store/ para el estado, y navigation/ para configurar rutas.

Paso 1: Configura el store de Redux en store/index.js para gestionar las tareas. Paso 2: Crea un stack navigator en navigation/AppNavigator.js con dos pantallas: HomeScreen y TaskDetailScreen. Paso 3: En HomeScreen, muestra una lista de tareas desde el estado y un botón para añadir nuevas. Paso 4: En TaskDetailScreen, permite editar una tarea específica, actualizando el estado global. Conecta las pantallas al store usando useSelector y useDispatch de React-Redux.

Código en acción

Aquí tienes un ejemplo funcional de configuración básica. Antes: sin gestión de estado, los datos pasan por props y se pierden al navegar.

// Antes: HomeScreen sin estado global
import React from 'react';
import { View, Text } from 'react-native';

export default function HomeScreen({ navigation }) {
  const tasks = ['Tarea 1', 'Tarea 2']; // Estado local
  return (
    
      {tasks.map((task, index) => (
        {task}
      ))}
    
  );
}

Después: integrando Redux para estado global accesible en cualquier pantalla.

// Después: HomeScreen con Redux
import React from 'react';
import { View, Text, Button } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import { addTask } from '../store/taskSlice';

export default function HomeScreen({ navigation }) {
  const tasks = useSelector(state => state.tasks); // Estado global
  const dispatch = useDispatch();
  
  const handleAddTask = () => {
    dispatch(addTask('Nueva tarea')); // Actualiza estado
  };
  
  return (
    
      {tasks.map((task, index) => (
         navigation.navigate('TaskDetail', { taskId: index })}>
          {task}
        
      ))}
      
    
  );
}

Errores comunes

• Anidar navigators incorrectamente: Mezclar stack, tab y drawer navigators sin planificar puede causar bugs de navegación. Solución: Diseña la estructura de navegación en papel primero y usa un solo navigator raíz.
• Estado duplicado: Guardar los mismos datos en el estado local y global, llevando a inconsistencias. Solución: Decide qué datos son globales (ej., usuario) y cuáles locales (ej., input temporal).
• No limpiar listeners de navegación: Olvidar remover event listeners en useEffect puede causar fugas de memoria. Solución: Siempre retorna una función de limpieza en useEffect.
• Pasar props en exceso por navegación: Enviar objetos grandes como parámetros de ruta, ralentizando la app. Solución: Pasa IDs y recupera datos del estado global.
• Ignorar el rendimiento en listas grandes: No usar FlatList o SectionList para listas, afectando la fluidez. Solución: Optimiza listas con estas componentes y keyExtractor.

Checklist de dominio

1. ¿Puedes configurar un stack navigator con al menos tres pantallas en Expo?
2. ¿Sabes conectar un componente a Redux usando useSelector y useDispatch?
3. ¿Has implementado navegación con parámetros y manejado su recepción?
4. ¿Puedes diferenciar cuándo usar estado local vs. global en una app real?
5. ¿Has probado la navegación en ambos iOS y Android para verificar consistencia?
6. ¿Sabes depurar errores comunes de navegación como "undefined is not an object"?
7. ¿Puedes refactorizar una app para mover estado de props a un store global?

Crea una app de notas con navegación y estado global

En este ejercicio, desarrollarás una app simple de notas móvil que use React Navigation para navegar entre pantallas y Redux para gestionar el estado global de las notas. Sigue estos pasos:

1. Inicia un nuevo proyecto Expo: expo init NotesApp y elige la plantilla en blanco.
2. Instala las dependencias necesarias: expo install @react-navigation/native @react-navigation/stack react-redux redux @reduxjs/toolkit.
3. Crea la estructura de carpetas: screens/, store/, navigation/.
4. En store/notesSlice.js, define un slice de Redux con acciones para añadir, editar y eliminar notas. Usa createSlice de Redux Toolkit.
5. Configura el store en store/index.js y envuélvelo alrededor de la app en App.js.
6. En navigation/AppNavigator.js, crea un stack navigator con dos pantallas: HomeScreen (lista de notas) y NoteDetailScreen (detalle/edición).
7. Implementa HomeScreen en screens/HomeScreen.js: muestra notas desde el store, un botón para añadir nuevas, y navega a NoteDetailScreen al tocar una nota.
8. Implementa NoteDetailScreen en screens/NoteDetailScreen.js: permite ver y editar una nota, actualizando el store al guardar.
9. Prueba la app en un emulador o dispositivo: añade notas, edítalas, y verifica que los cambios persistan al navegar.
10. Opcional: Añade un drawer navigator para una pantalla de configuración que cambie el tema (claro/oscuro) usando estado global.

Pistas

• Usa createStackNavigator de React Navigation para definir las rutas en AppNavigator.js.
• En el slice de Redux, define el estado inicial como un array de objetos con id, title, y content.
• Para navegar con parámetros, pasa el id de la nota en navigation.navigate y recupéralo con route.params.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.