No estoy seguro de cómo manejar los errores en un reductor redux. Cuando mi búsqueda de API devuelve datos, necesito transformar su estructura y verificar que se hayan establecido varias propiedades en los datos resultantes. Sin embargo, no puedo arrojar errores en el reductor ya que redux requiere que se devuelva al menos el estado anterior. ¿Cómo hago para manejar esto?
Nota: estoy usando react-redux-toastr para manejar errores y tengo acceso al despachador de errores en las funciones de componente y acción.
reductores/búsqueda de objetos.js:
case "FETCH_OBJECTS_FULFILLED": { // munge data into expected format const _allObjects = []; const data = action.payload; // if can't find the surveys property if (!data.hasOwnProperty("surveys")) { // - - How do I handle this within the reducer? - - // this.handleAlert("error", "ERROR", " Cannot find a list of surveys. Please contact support."); return { ...state, fetching: false } } // transform data (omitted for brevity's sake) return { ...state, fetching: false, fetched: true, options: _allObjects, surveys: data.surveys.map(survey => survey.name) // toastrs: [newToastr, ...state.toastrs] }; }Intenté actualizar la porción de la tienda de la tostada en el reductor de ObjectSearch después de conectarme en el componente ObjectSearch:
reductores/index.js:
const rootReducer = combineReducers({ toastr: toastrReducer, ObjectSearch });componentes/búsqueda de objetos.js
@connect(store => { return { fetching: store.ObjectSearch.fetching, fetched: store.ObjectSearch.fetched, ready: store.ObjectSearch.ready, surveys: store.ObjectSearch.surveys, toastrs: store.toastr.toastrs }; })sin embargo, agregar lo siguiente a reducers/object-search.js: parece actualizar ObjectSearch.toastrs en lugar de toastr.toastrs :(
const toastrs = [...state.toastr]; const newToastr = { id: guid(), type: 'light', title: 'OBJECT SEARCH ERROR', message: 'No Data. Please contact support.', options: { ...REDUX_TOASTR_OPTIONS, icon: icons.ERROR_ICON, status: 'error' } }; toastrs.push(newToastr);Soy un novato de react/redux, por lo que cualquier ayuda sobre la estructura de la aplicación aquí sería apreciada.
Un patrón general sería devolver un estado que indica que se produjo un error. Por ejemplo, en el contexto de una aplicación TODO, si la acción recibida es incorrecta, puede tener algo como:
function reducer (state = { todos: [], error: null }, action) { switch (action.type) { case "ADD_TODO": if (typeof action.todo === "string") { return Object.assign({}, state, { error: { code: "INVALID TODO ACTION", message: "The todo action received was empty, need a .text property", action } }); } else { return { todos: [action.text, ...state.todos], error: null } } } }Luego, cualquier suscriptor que escuche la tienda, al ver el nuevo estado devuelto, puede tomar medidas.
Creo que lo importante es que todo es muy declarativo, en la lógica reductora declaras el comportamiento del estado en relación con la acción recibida. No hay relación con el mundo/contexto exterior (se dice que la función es pura). Lanzar un error o llamar a algo externo rompe el patrón.
Lo interesante de esto es que puede tener un middleware que observe estados con una clave de error no nula y tomar medidas al respecto.
Otra cosa que puede preocuparle es cuando hay un error genuino en sus acciones: la forma del objeto es inesperada, o tiene una cadena en lugar de un error, etc. En este caso, es posible que se produzca un error inesperado. Lo que sucederá ?
Puedes ver en la fuente que redux no hace nada. Simplemente se restablecerá a su estado notDispatching . Entonces, si no cambiaste el estado, todo está bien (tanto como puede ser de todos modos). Si lo hiciste, entonces tienes un estado inconstante en tus manos...