Cómo obtener datos en React usando Redux Toolkit Query

React es una biblioteca de JavaScript popular para crear interfaces de usuario para aplicaciones web. Al crear una aplicación, es importante tener en cuenta un enfoque de gestión de datos eficiente para asegurarse de obtener y representar los datos en el navegador de forma adecuada, en respuesta a las interacciones del usuario.

Sin embargo, administrar este proceso aparentemente puede convertirse en una tarea tediosa y propensa a errores, especialmente si está obteniendo datos de múltiples fuentes y necesita actualizar constantemente varios estados. En tales casos, Redux Toolkit Query proporciona una solución eficiente.

Consulta del kit de herramientas de Redux (RTK Query) es una herramienta de obtención de datos construida sobre el kit de herramientas Redux. Su documentación oficial describe RTK Query como "una poderosa herramienta de obtención y almacenamiento en caché de datos diseñada para simplificar casos comunes para cargar datos en una aplicación web, eliminando la necesidad de escribir a mano la lógica de recuperación y almacenamiento en caché de datos tú mismo".

Esencialmente, proporciona un conjunto de funciones y capacidades que agilizan el proceso de obtención y gestión de datos de las API o cualquier otra fuente de datos de una aplicación React.

Si bien existen similitudes entre Redux Toolkit Query y React Query, una de las principales ventajas de Redux Toolkit Query es su perfecta integración con Redux, una biblioteca de gestión estatal, lo que permite una solución completa de recuperación de datos y gestión de estado para las aplicaciones React cuando se usan juntas.

Algunas de las funciones principales de RTK incluyen almacenamiento en caché de datos, una función de gestión de consultas y manejo de errores.

Para comenzar, puede activar rápidamente un proyecto React localmente usando el Crear aplicación de reacción dominio.

mkdir React-RTQ
cd reaccionar-RTQ
npx create-react-app reaccionar-rtq-ejemplo
cd reaccionar-rtq-ejemplo 
inicio de npm

Alternativamente, puede configurar un proyecto React usando Vite, una nueva herramienta de compilación y servidor de desarrollo para aplicaciones web.

Puedes encontrar el código de este proyecto en este repositorio GitHub.

Instale las dependencias requeridas

Una vez que tenga su proyecto React en funcionamiento, continúe e instale los siguientes paquetes.

npm instalar @reduxjs/toolkit reaccionar-redux

Definir un segmento de API

Un segmento de API es un componente que incluye la lógica Redux necesaria para integrarse e interactuar con puntos finales de API específicos. Proporciona una forma estandarizada de definir puntos finales de consulta para obtener datos y puntos finales de mutación para modificar los datos.

Esencialmente, un segmento de API le permite definir los puntos finales para solicitar y realizar cambios en los datos de una fuente en particular, lo que brinda un enfoque simplificado para la integración con las API.

En el origen directorio, cree una nueva carpeta y asígnele un nombre, características. Dentro de esta carpeta, crea un nuevo archivo: apiSlice.jsy agregue el siguiente código:

importar { crearApi, buscarBaseQuery } de"@reduxjs/kit de herramientas/consulta/reaccionar";
exportarconstante productosApi = createApi({
 rutareductora: "productosAp",
 baseQuery: buscarBaseQuery({ URL base: " https://dummyjson.com/" }),
 puntos finales: (constructor) => ({
 getAllProducts: builder.query({
 consulta: () =>"productos",
 }),
 getProduct: constructor.consulta({
 consulta: (producto) =>`productos/búsqueda? q=${producto}`, 
 }),
 }),
});
exportarconstante { useGetAllProductsQuery, useGetProductQuery } = productsApi;

Este código define un segmento API llamado productosApi usando el kit de herramientas de Redux crearApi función. El segmento API toma las siguientes propiedades:

• A caminoreductor propiedad: establece el nombre del reductor en la tienda Redux.
• El baseQuery propiedad: especifica la URL base para todas las solicitudes de API que utilizan el buscarBaseQuery función proporcionada por Redux Toolkit.
• API puntos finales - especifique los puntos finales disponibles para este segmento de API utilizando el constructor objeto. En este caso, el código define dos puntos finales.

Finalmente, se generan dos ganchos a partir de la API de productos objeto que identifica los dos puntos finales. Puede usar estos ganchos en varios componentes de React para realizar solicitudes de API, recuperar datos y cambiar el estado en respuesta a la interacción del usuario.

Este enfoque agiliza la gestión del estado y la obtención de datos en la aplicación React.

Configurar la tienda Redux

Después de obtener los datos de la API, RTK Query almacena en caché los datos en la tienda Redux. La tienda, en este caso, sirve como centro central para administrar el estado de las solicitudes de API realizadas desde React. aplicación, incluidos los datos recuperados de esas solicitudes de API, lo que garantiza que los componentes accedan y actualicen estos datos como necesario.

En el directorio src, cree un tienda.js archivo y agregue las siguientes líneas de código:

importar { configurarTienda } de"@reduxjs/kit de herramientas";
importar { productosApi } de"./características/apiSlice";
exportarconstante almacenar = configurarAlmacenar({
 reductor: {
 [productsApi.reducerPath]: productosApi.reductor,
 },
 software intermedio: (getDefaultMiddleware) =>
 getDefaultMiddleware().concat (productosApi.middleware),
});

Este código crea una nueva tienda Redux, con dos piezas principales de configuración:

1. reductor: Esto define cómo la tienda debe manejar las actualizaciones del estado. En este caso, el productosApi.reductor se pasa como función reductora y se le otorga una clave reducerPath única para identificarla dentro del estado general de la tienda.
2. software intermedio: Esto define cualquier middleware adicional que deba aplicarse a la tienda.

La resultante almacenar El objeto es una tienda Redux completamente configurada, que se puede usar para administrar el estado de la aplicación.

Al configurar la tienda de esta manera, la aplicación puede administrar fácilmente el estado de las solicitudes de API y procesar sus resultados de manera estandarizada utilizando Redux Toolkit.

Crear un componente para implementar la funcionalidad RTK

En el directorio src, cree un nuevo componentes carpeta con un nuevo archivo dentro: Datos.js.

Agregue este código al archivo Data.js:

importar { useGetAllProductsQuery } de"../características/apiSlice";
importar Reaccionar, { estado de uso } de"reaccionar";
importar"./producto.componente.css";
exportarconstante Datos = () => {
constante { datos, error, isLoading, refetch } = useGetAllProductsQuery();
constante [productsData, setProductsData] = useState([]);
constante manejarDisplayData = () => {
 recuperar();
 setProductsData (datos?.productos);
 };
devolver (
"producto-contenedor">
"botón de producto" onClick={handleDisplayData}>
 Mostrar datos
 </button>
 {esta cargando && <división>Cargando...división>}
 {error && <división>Error: {error.mensaje}división>}
"etiqueta del producto">Productos:</label>
 {productosDatos && productosDatos.longitud > 0 && (


 {productsData.slice(0, 4).mapa((producto) => (
"Detalles de producto" clave={producto.id}>
Nombre: {producto.título}</p>

Descripción: {producto.descripción}</p>

Precio: {producto.precio}</p>
 </li>
 ))}
 </ul>
 )}
 </div>
 );
};

Este código demuestra un componente de React que utiliza el gancho useGetAllProductsQuery proporcionado por el segmento de la API para recuperar datos del punto final de la API especificado.

Cuando el usuario hace clic en el botón Mostrar datos, se ejecuta la función handleDisplayData y se envía una solicitud HTTP a la API para recuperar los datos del producto. Una vez recibida la respuesta, la variable de datos de productos se actualiza con los datos de respuesta. Finalmente, el componente muestra una lista de detalles del producto.

Actualizar el componente de la aplicación

Realice los siguientes cambios en el código del archivo App.js:

importar"./Aplicación.css";
importar { Datos } de"./componentes/Datos";
importar { almacenar } de"./almacenar";
importar { Proveedor } de"reaccionar-redux";
importar { Proveedor de API } de"@reduxjs/kit de herramientas/consulta/reaccionar";
importar { productosApi } de"./características/apiSlice";
funciónaplicación() {
devolver (


"Aplicación">

 </div>
 </ApiProvider>
 </Provider>
 );
}
exportarpor defecto aplicación;

Este código envuelve el componente de datos con dos proveedores. Estos dos proveedores otorgan al componente acceso a la tienda Redux y las funciones de consulta RTK, lo que le permite obtener y mostrar datos de la API.

Es fácil configurar Redux Toolkit Query para recuperar datos de manera eficiente de una fuente específica con un código mínimo. Además, también puede incorporar funciones para modificar los datos almacenados definiendo puntos finales de mutación en el componente de segmento API.

Al combinar las características de Redux con las capacidades de obtención de datos de RTK, puede obtener una solución integral de administración de estado para sus aplicaciones web React.