reactjs - tutorial - redux-thunk

Cómo manejar errores 401 en una aplicación Redux/React

Question

Estoy construyendo un sitio con React y Redux y tengo una consulta sobre cómo debo manejar las 401 respuestas de estado.

Actualmente, cuando la API informa un estado HTTP 401, generalmente se detecta en una de mis acciones y envío:

return dispatch({
    type: ''FETCH_MONTHLY_DATA_FAILURE'',
    error: response.data
});

Y el reductor relacionado verifica el código de estado HTTP y tengo algún middleware de Redux que verifica este valor de estado HTTPStatus y reacciona en consecuencia.

¿Hay alguna forma más elegante de manejar estos errores de manera general? Estoy usando Axios para mis solicitudes HTTP.

Answer 1

Agregue el interceptor de respuesta global que distribuye la acción cuando se produce un error

import store from ''./store'';

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
}, function (error) {
    // Do something with response error
    store.dispatch({
        type: ''API_ERROR'',
        payload: error,
    })
    return Promise.reject(error);
});

// In you reducers...
reduce(state, action) {
    if (action.type === ''API_ERROR'' && action.payload.statusCode === 401) {
        return { // whatever needed }
    }
    return state;
}

Answer 2

Tu dijiste :

Y el reductor relacionado verifica el código de estado HTTP ...

Usar un middleware es genial, pero el reductor no debe verificar el estado de http. Sería fuera de su propósito.

De la documentación :

El trabajo del reductor es especificar cómo cambia el estado de la aplicación en respuesta.

Tus creadores de acciones deben ser puros, todos los códigos asíncronos deben vivir en otro lugar.

Los efectos secundarios no pertenecen a los reductores

Hay muchas formas de hacerlo. Todo se reduce a las preferencias.

Aquí hay 3 maneras de manejar las solicitudes HTTP de una manera más elegante:

Opción 1 (la más poderosa): generadores, sagas y cadenas complejas de operaciones asincrónicas

redux-saga te permite hacer eso. Yo personalmente uso este middleware para manejar mis llamadas y respuestas de API.

El modelo mental es que una saga es como un hilo separado en su aplicación que es el único responsable de los efectos secundarios. redux-saga es un middleware redux, lo que significa que este hilo puede iniciarse, detenerse y cancelarse desde la aplicación principal con acciones de reducción normales, tiene acceso al estado de aplicación de redux completo y también puede enviar acciones de reducción.

Estos son los beneficios que obtengo al usar esta opción:

• aislar el código de efecto secundario en un solo dominio de la aplicación (sagas)
• composición de múltiples sagas (complejo con promesas)
• reduce la promesa de la repetitiva acción
• los creadores son mucho más fáciles de probar!

Simplifique la implementación de casos de uso como:

• En un gran blog multiusuario y de varios departamentos, si un usuario alguna vez ha hecho clic en un botón "suscribirse a la fuente RSS", la próxima vez que el usuario visite una sección que tenga una fuente RSS dedicada, muéstrele una sugerencia. suscribirse al feed de esta sección.

• En un IDE en línea, si un usuario nunca ha usado una característica particular de una aplicación, pero ha llegado a un estado en el que la característica mencionada podría ser potencialmente útil, muestre un cuadro de diálogo de ayuda que presente esta característica.

• En , mientras el usuario estaba respondiendo a una pregunta, OP ha cambiado la pregunta por lo que le informa al usuario que la pregunta ha cambiado y que la respuesta ya no es válida.

• etc.

redux-observable es otra opción:

Componer y cancelar acciones asíncronas para crear efectos secundarios y más.

Opción 2: poner la inteligencia que impulsa las operaciones asincrónicas en las operaciones de su aplicación en creadores de acciones

redux-promise o redux-thunk son buenos ejemplos.

Hasta aquí todo bien. Eliminamos el acoplamiento, separamos nuestra lógica asíncrona en otro lugar y tenemos una arquitectura limpia. Sin embargo, la característica más avanzada de redux-saga simplificará casos de uso complejos.

Aquí está la esencia de redux thunk:

El middleware asíncrono como redux-thunk o redux-promise envuelve el método dispatch () de la tienda y le permite enviar algo más que acciones, por ejemplo, funciones o Promises. Cualquier middleware que utilice puede interpretar todo lo que envíe y, a su vez, puede pasar acciones al siguiente middleware de la cadena. Por ejemplo, un middleware de Promise puede interceptar promesas y enviar un par de acciones de inicio / final de forma asincrónica en respuesta a cada promesa.

Opción 3: gestión de efectos secundarios a través de componentes de orden superior

Los componentes de orden superior (HOC) son funciones de JavaScript que agregan funcionalidad a las clases de componentes existentes. Así como los componentes de React le permiten agregar funcionalidad a una aplicación, los Componentes de orden superior le permiten agregar funcionalidad a los componentes. Podría decir que son componentes para los componentes.

¡No es ideal para todos los casos de uso!

Ejemplo: axios , un cliente HTTP basado en promesas para el navegador y node.js

Opción 4: Generadores y promesas, sans Sagas

Por último, pero no menos importante, aún puede usar generadores para administrar su flujo de control asíncrono, en frontend, sin agregar dependencia de redux-thunk, si no necesita algunas de sus características avanzadas.