Cómo obtener datos con Redux-Saga en una aplicación React

React y Redux son herramientas de desarrollo web populares para administrar el estado y desarrollar interfaces de usuario dinámicas.

Acceder a la información puede ser difícil y llevar mucho tiempo, especialmente cuando se trata de eventos asincrónicos. Redux-Saga, un paquete de middleware fácil de usar que administra actividades asincrónicas, puede simplificar este proceso.

Aprenda cómo React para construir una aplicación que recupere datos de Redux-Saga.

Entendiendo Redux-Saga

Redux-Saga es un paquete de middleware que simplifica la administración y la prueba de efectos secundarios, como el acceso al almacenamiento del navegador y las solicitudes API asíncronas. El uso de funciones de generador hace que el código asincrónico parezca sincrónico, lo que facilita el razonamiento y la depuración.

Redux-Saga funciona buscando acciones específicas de Redux y activando Sagas, que son funciones generadoras de efectos secundarios. Sagas puede ejecutar operaciones asincrónicas, como obtener datos de una API, y luego enviar una nueva acción de Redux para actualizar el estado.

Tome el ejemplo de usar Redux-Saga para administrar llamadas API asíncronas. Comience creando una acción Redux que inicie el procedimiento de recopilación de datos:

exportarconstante FETCH_DATA = 'OBTENER DATOS';
exportarconstante buscar datos = (parámetros) => ({
 tipo: FETCH_DATA,
 carga útil: parámetros,
});

La carga útil de la acción, FETCH_DATA, incluye todos los parámetros esenciales, como el punto final de la API y los parámetros de solicitud.

A continuación, defina una Saga que escuche la actividad FETCH_DATA y realice la recopilación de datos:

importar { llamar, poner, tomar Último } de'redux-saga/efectos';
importar axios de'axíos';
exportarfunción* fetchDataSaga(acción) {
intentar {
constante respuesta = producir llamada (axios.get, action.payload.endpoint, {
 parámetros: action.payload.params,
 });
producir poner({ tipo: 'FETCH_DATA_SUCCESS', carga útil: respuesta.datos });
 } atrapar (error) {
producir poner({ tipo: 'FETCH_DATA_ERROR', carga útil: error });
 }
}
exportarfunción* verFetchData() {
producir tomarLatest (FETCH_DATA, fetchDataSaga);
}

Esta Saga hace una llamada API al axios biblioteca usando el llamar efecto. Luego envía los datos obtenidos como una nueva carga útil de acción Redux con el tipo FETCH_DATA_SUCCESS. Si ocurre un error, envía una nueva acción Redux con el objeto de error como carga útil y un tipo de FETCH_DATA_ERROR.

Finalmente, debe registrar Saga en la tienda Redux utilizando el middleware redux-saga:

importar { aplicarMiddleware, crear tienda } de'redux';
importar crearSagaMiddleware de'redux-saga';
importar rootReducer de'./reductores';
constante sagaMiddleware = createSagaMiddleware();
constante store = createStore (rootReducer, applyMiddleware (sagaMiddleware));
sagaMiddleware.run (relojFetchData);

Al registrar el verFetchData Saga con el nuevo middleware de instancia, este código crea otro redux-saga. El middleware se configura en la tienda Redux usando AplicarMiddleware.

Redux-Saga, en general, proporciona un enfoque sólido y versátil para gestionar actividades asincrónicas dentro de Redux de React aplicaciones Puede optimizar la obtención de datos y generar un código más fácil de probar, mantener y actualizar utilizando Sagas para controlar los errores de código.

Problemas comunes de obtención de datos en aplicaciones React

Hay algunas dificultades que los desarrolladores encuentran con frecuencia al usar la obtención de datos de React. Aquí están algunos ejemplos:

1. Gestión de acciones asincrónicas: esta es información proporcionada por una interfaz de programación que realiza un seguimiento de las operaciones no simultáneas sin interferir con la interfaz de usuario (UI). Trabajar con varias solicitudes de API o datos que dependen de otros datos puede dificultar esta tarea.
2. Manejo de errores: las llamadas a la API pueden fallar y es vital que maneje estos errores correctamente. Esto incluye proporcionar mensajes de error al usuario y permitirle volver a enviar la solicitud.
3. Actualización de la tienda Redux: debe guardar la información adquirida de una API en la tienda Redux para que otros componentes puedan acceder a ella. Es crucial actualizar la tienda sin interferir o corromper los datos ya existentes.

Cómo usar Redux-Saga para la obtención de datos en React

El uso de Redux-Saga para la obtención de datos le permite separar la lógica para realizar llamadas API y manejar la respuesta de sus componentes React. Como resultado, puede concentrarse en representar los datos y reaccionar a las interacciones del usuario, mientras que Sagas maneja la recuperación de datos asincrónicos y la gestión de errores.

Necesitas registrar el verFetchData Saga con el redux-saga middleware para usar las Sagas en nuestra tienda Redux:

// src/tienda.js
importar { crear tienda, aplicar software intermedio } de'redux';
importar crearSagaMiddleware de'redux-saga';
importar rootReducer de'./reductores';
importar { verFetchData } de'./sagas/dataSaga';
constante sagaMiddleware = createSagaMiddleware();
constante store = createStore (rootReducer, applyMiddleware (sagaMiddleware));
sagaMiddleware.run (relojFetchData);
exportarpor defecto almacenar;

Este código registra el sagaMiddleware con la tienda Redux usando el aplicarMiddleware función y la crearSagaMiddleware metodo de la redux-saga paquete. Entonces, usando el correr método, ejecuta el verFetchData Saga.

Su configuración de Redux-Saga está completa ahora que cada componente está en su lugar. La saga utiliza el fetchDataApi función para obtener los datos cuando su componente React envía la acción FETCH_DATA_REQUEST. Si la recuperación de datos programada es exitosa, envía otra actividad con los datos obtenidos. Si hay un error, envía una nueva acción con el objeto de error.

// src/componentes/DataComponent.js
importar Reaccionar, {useEffect} de'reaccionar';
importar { usarDispatch, usarSelector } de'reaccionar-redux';
importar {fetchDataRequest} de'../acciones/datosAcciones';
constante Componente de datos = () => {
constante despacho = useDispatch();
constante { datos, está cargando, error } = useSelector((estado) => estado.datos);
 usarEfecto(() => {
 despacho (fetchDataRequest({ param1: 'valor1', param2: 'valor2' }));
 }, [despacho]);
si (esta cargando) {
devolver<división>Cargando...división>;
 }
si (error) {
devolver<división>Error: {error.mensaje}división>;
 }
devolver (



 {datos.mapa((artículo) => (
{elemento.nombre}</div>
 ))}
 </div>
 );
};
exportarpor defecto componente de datos;

En el ejemplo anterior, se utiliza el usarSelector enganche su componente React para obtener los datos, esta cargando, y error valores de la tienda Redux. Además, envía la acción FETCH_DATA_REQUEST utilizando el gancho useEffect() cuando el componente se monta. Usted representa los datos, el mensaje de carga o el mensaje de error según el datos valores, esta cargando, y error.

Al aprovechar Redux-Saga para la obtención de datos, administrar solicitudes de API asíncronas en una aplicación React puede simplificarse significativamente. Puede crear un código más fácil de mantener y modular aislando la lógica de llamadas a la API de sus componentes y administrando el flujo asíncrono en Sagas.

Mejores prácticas para usar Redux-Saga para la obtención de datos

Siga estas mejores prácticas mientras usa Redux-Saga para la obtención de datos:

1. Utilice sagas distintas para cada operación de obtención de datos. Es recomendable separar un Saga para cada proceso de obtención de datos en lugar de incluir toda la lógica en un solo Saga. Mantener y modificar el código es más sencillo ya que puede encontrar inmediatamente las Sagas relevantes para ciertas actividades.
2. Use el manejo de errores integrado de Redux-Saga. Puede usar el bloque try/catch de Redux-Saga para manejar los errores automáticamente. Esto nos permite gestionar los errores de forma centralizada y proporcionar a los usuarios mensajes de error uniformes.
3. Usa sagas cancelables para un mejor rendimiento. Cuando usa un componente React, puede desencadenar muchas llamadas a la API. Las situaciones de carrera y las llamadas innecesarias a la interfaz de programación pueden resultar de este activador de API. Al cancelar cualquier llamada API en curso cuando realiza una nueva solicitud, puede evitar esto.
4. Utilice los datos más actuales. Al realizar varias solicitudes de API para los mismos datos, es fundamental asegurarse de que utilicen los datos más recientes. Utilizando el el último efecto, Redux-Saga te ayuda a lograrlo. El efecto garantiza que esté utilizando las llamadas API más recientes o más recientes y cancela cualquier solicitud API pendiente para los mismos datos.
5. Use un archivo separado para las sagas. Debe mantener las Sagas separadas del archivo de la tienda Redux. Como resultado, sus Sagas serán más fáciles de controlar y probar.

Obtener datos con Redux-Saga

Redux-Saga ofrece un método confiable y flexible para manejar tareas asincrónicas en aplicaciones React. Con Sagas, puede crear un código más robusto, comprobable y flexible que separe las preocupaciones.

La obtención de datos puede ser una operación difícil y propensa a errores, pero puede simplificarla con la ayuda de Redux-Saga. Redux-Saga mejora la experiencia del usuario al permitirle administrar de manera confiable y predecible muchos procesos asincrónicos.

Debido a sus muchos beneficios y características, Redux-Saga es una fantástica adición a su colección de herramientas de desarrollo de React.