React: Servicios y gestión de estado

En el desarrollo de aplicaciones con React 19, la gestión del estado y el uso de servicios son aspectos fundamentales para construir aplicaciones eficientes y mantenibles. En esta lección, exploraremos cómo manejar el estado de la aplicación y cómo integrar servicios externos de manera efectiva.

Gestión de estado en React 19

La gestión del estado en React 19 se puede abordar de diversas maneras, dependiendo de la complejidad de la aplicación. A continuación, se presentan algunas estrategias comunes:

Uso de hooks

Los hooks son una característica clave en React para manejar el estado y otros efectos secundarios. Dos hooks fundamentales para la gestión de estado son useState y useReducer.

useState

El hook useState se utiliza para manejar estados locales en componentes funcionales. Ejemplo:

import React, { useState } from 'react';

function Contador() {
const [contador, setContador] = useState(0);

return (
<div>
<p>Contador: {contador}</p>
<button onClick={() => setContador(contador + 1)}>Incrementar</button>
</div>
);
}

useReducer

Para estados más complejos, useReducer es una alternativa adecuada. Proporciona un enfoque similar a los reducers de Redux.

import React, { useReducer } from 'react';

const initialState = { contador: 0 };

function reducer(state, action) {
switch (action.type) {
case 'incrementar':
return { contador: state.contador + 1 };
case 'decrementar':
return { contador: state.contador - 1 };
default:
return state;
}
}

function Contador() {
const [state, dispatch] = useReducer(reducer, initialState);

return (
<div>
<p>Contador: {state.contador}</p>
<button onClick={() => dispatch({ type: 'incrementar' })}>Incrementar</button>
<button onClick={() => dispatch({ type: 'decrementar' })}>Decrementar</button>
</div>
);
}

Servicios en React 19

La integración de servicios externos es crucial para aplicaciones que dependen de datos externos o APIs. La forma más común de manejar servicios en React es mediante el hook useEffect para manejar efectos secundarios y la API Fetch para realizar solicitudes HTTP.

Fetch y useEffect

A continuación, se muestra un ejemplo de cómo realizar una solicitud HTTP utilizando fetch y useEffect.

import React, { useState, useEffect } from 'react';

function ListaUsuarios() {
const [usuarios, setUsuarios] = useState([]);
const [cargando, setCargando] = useState(true);

useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(data => {
setUsuarios(data);
setCargando(false);
});
}, []);

if (cargando) {
return <p>Cargando...</p>;
}

return (
<ul>
{usuarios.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}

Manejo de errores

Es importante manejar errores en las solicitudes para mejorar la experiencia del usuario:

useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => {
if (!response.ok) {
throw new Error('Error en la solicitud');
}
return response.json();
})
.then(data => {
setUsuarios(data);
setCargando(false);
})
.catch(error => {
console.error('Error:', error);
setCargando(false);
});
}, []);