Estoy creando una aplicación "segura" y usando redux-saga junto con fetchjs para hacer las llamadas asíncronas al backend.
Mi backend devuelve un código de estado 401 cuando el usuario no está autorizado, quiero capturar esta "excepción" globalmente y enviar una acción para que mi aplicación de reacción vaya a la pantalla de inicio de sesión.
Encontré la siguiente solución: https://github.com/redux-saga/redux-saga/issues/110 , pero en este caso el manejo del 401 debería ser explícito en cada saga que construyamos.
Al agregar código a cada saga, se vuelve más complejo. También aumenta las posibilidades de que un desarrollador se olvide de agregar el código para manejar el código 401.
¿Hay una buena manera de manejar esta respuesta 401 a nivel mundial?
No usaría redux-saga ya que no tiene la capacidad de hacer lo que necesita.
En cambio, al configurar la tienda, la capa API y otras cosas, configure la capa API, invoque el controlador en cada error que ocurra.
Ejemplo de capa de API que informa que invoca el controlador de errores.
const conf = { onError: () => {}, } api.onError = (cb) => { conf.onError = cb; } api.get = (url) => { fetch(url) .then(response => { if (response.ok === false) { return conf.onError(response); } return response; }) // Network error .catch(conf.onError) }Configurar aplicación.
import store from './store'; // Configure your API wrapper and set error callback which will be called on every API error. api.onError((error) => { store.dispatch({ type: 'API_ERROR', payload: error, }); }); // In you reducers... isAuthorized(state, action) { if (action.type === 'API_ERROR' && action.payload.statusCode === 401) { return false; } return state; }Luego, llame a la API como de costumbre, si ocurre un error, la acción se envía a la tienda y puede o no reaccionar a estas acciones.