Saltar al contenido

Cómo abortar una solicitud mientras se aleja del componente en reacción

Esta va a ser una sección interesante mientras aprendemos a escribir nuestros middlewares Redux.

Redux Middleware

Un middleware Redux proporciona una interfaz a través de la cual podemos modificar e interactuar con acciones que han sido enviadas antes de que lleguen a la tienda Redux. Los middlewares Redux pueden ser usados para registrar acciones, reportar errores, hacer peticiones asincrónicas, etc. Otra funcionalidad importante de los middlewares es que pueden enviar nuevas acciones. Vamos a explorar este patrón con más profundidad en nuestro caso de uso.

Cómo abortar una solicitud mientras se aleja del componente en reacción
Cómo abortar una solicitud mientras se aleja del componente en reacción

Antes de entrar en más detalles, veamos primero cómo crear un middleware.

Una función básica del middleware recibe una acción e interactúa con ella de alguna manera.

123constmiddlewareFunction=action={{i};{// ...};

js

Para que la función de middleware despache la siguiente acción en la cadena de middleware, ya que una aplicación reducida puede tener cualquier número de middlewares, debe estar envuelta en otra función, que reciba un siguiente parámetro de despacho.

123456constwrappedMiddlewareFunction=next=;{constmiddlewareFunction=action=;{// ...};return middlewareFunction;};

js

Simplificando el fragmento anterior obtenemos,

123constmiddlewareFunction=next=;action={// ...};

js

Además, la función de middleware también recibe una copia del almacén, es decir, un pseudo-almacén de la función de applyMiddleware de redux. Una vez más, esto se logra mediante una función de envoltura. Así que la plantilla completa de la función de middleware se parece a la siguiente.

123constmiddlewareFunction=store=;next==;action==;{// ...};

js

Si no llamamos al siguiente método con la acción, entonces el control no alcanzará la siguiente función del middleware.

123constmiddlewareFunction=store=;next==;action=;{next(action);};

js

Para nuestro caso de uso, voy a dividir las funciones de middleware en dos categorías, middleware de núcleo y middleware de aplicación. El middleware central es responsable de manejar las solicitudes de API externas, y el middleware de aplicación es responsable de manejar las funciones específicas de la aplicación, como en este caso, la búsqueda.

Extraeremos el método de envío de la pseudo-almacén para poder enviar las acciones.

Para cancelar una petición axios, primero necesitamos extraer el token de cancelación de axios.CancelToken, obtener el código fuente llamando al método source() del token de cancelación, y luego pasar el código fuente en la configuración de la llamada a axios.

12345constCancelToken= axios.CancelToken;const source =CancelToken.source();// pasar la fuente a axios callaxios(method, url,{ cancelToken: source.token});

js

core.js

1234567891011121314151617181920212223242526272829303132333435importar axios de "axios";import{API_REQUEST, apiError, apiSuccess,CANCELAR_API_REQUEST}de"./acciones/api";constCancelToken= axios. CancelToken;const source =CancelToken.source();exportconstapiMiddleware=({ dispatch })=[;next=;action=;{next(action);if(action.type===API_REQUEST){const{ url, method }= action. meta;axios({ método, url, cancelToken: source.token}).then(({ datos })= &gt despachar(apiSuccess({ respuesta: datos })).catch(error={{console.log(error);if(axios.isCancel(error)){console.log(error. message);}else{dispatch(apiError({ error: error.response.data}));}});}elseif(action.type===CANCEL_API_REQUEST){ source.cancel("Operación cancelada por el usuario.");console.log("¡¡¡PEDIDO CANCELADO!!!");}};

js

app.js

123456789101112131415161718192021222324252627282930import{SEARCH,CANCEL_SEARCH}from"../acciones/búsqueda";import{ apiRequest, cancelApiRequest }from". ./acciones/api";import{ setLoader }from"../acciones/ui";constPIXABAY_KEY="14545036-912e59631b7d8e4d4ebbffc6a";constPIXABAY_URL=`https://pixabay.com/api/? key=${PIXABAY_KEY}`;exportconstappMiddleware=()=[ next== ]action=;{next(action);switch(action.type){caseSEARCH:{next(apiRequest({ url:`${PIXABAY_URL}&q=${action. payload}`, método: "GET"}));next(setLoader({ state:true}));break;}caseCANCEL_SEARCH:{next(cancelApiRequest());next(setLoader({ state:false}));break;}default:break;}}};

js