0

estoy queriendo retornar una promesa en una action de redux para poder manejar una loading y error en el componente dispatch(action)).then(()=> blabla), es correcto hacerlo de esta manera o es una mala practica? lo quiero hacer de esta manera ya que el las action y reducers son gigantes y solo manejan un loading y lo quiero hacer por componentes

export const MyFunction = () => {
  return async dispatch => {
   try {
    //some code async code
    return Promise.resolve()
   } catch {
     return Promise.reject()
   }
  }
}

1 respuesta 1

0

La idea de usar redux es precisamente usar el estado definido en el store para actualizar la vista, es decir que si tienes que realizar una operación asíncrona lo que deberías hacer en teoría es definir diferentes acciones que actualicen el estado que representa esa operación asíncrona en diferentes momentos, hacerlo de otra manera sería considerado un anti-patrón.

Como así? pongamos un ejemplo; digamos que quieres hacer una petición a una api y desglosarla de esta manera:

  • mostrar un loader mientras carga
  • mostrar un resultado si funciona la petición
  • mostrar un error si falla la petición

Si te fijas, estas son 3 acciones diferentes que pueden ocurrir en 3 momentos diferentes, por lo tanto eso es lo que debes reflejar en tu código (voy a usar el hook useReducer como ejemplo):

const initialState = {
  loading: false, // representa el estado de carga
  error: null,    // representa el estado de error
  data: null      // representa el resultado de la operación
};

function reducer(state, action) {
  switch (action.type) {
    // acción #1: la información esta cargando
    // por lo tanto no hay data ni error:
    case 'LOAD_DATA':
      return {
        loading: true,
        error: null,
        data: null,
      };

    // acción #2: la información terminó de cargar sin problemas
    // por lo tanto hay data y no hay error, además ya no esta cargando:
    case 'LOAD_DATA_SUCCESS':
      return {
        loading: false,
        error: null,
        data: action.payload,
      };

    // acción #3: la información terminó de cargar pero hubo un error
    // por lo tanto se muestra el error, no hay data y ya no esta cargando:
    case 'LOAD_DATA_FAILURE':
      return {
        loading: false,
        error: action.payload,
        data: null,
      };
    default:
      return state;
  }
}

function Example() {
  const [state, dispatch] = useReducer(reducer, initialState);

  // operación asíncrona:
  useEffect(() => {
    // ejecutamos las acciones en sus respectivos momentos:
    (async () => {
      try {
        // momento #1: la información esta cargando:
        dispatch({ type: 'LOAD_DATA' });
        // hipotético método asíncrono que carga la info:
        const data = await loadDataFromApi();
        // momento #2.1: la información cargó sin problemas:
        dispatch({ type: 'LOAD_DATA_SUCCESS', payload: data });
      } catch (error) {
        // momento #2.2: hubo un error durante la carga:
        dispatch({ type: 'LOAD_DATA_FAILURE', payload: error });
      }
    })();
  }, []);

  // nuestra vista debe reflejar lo que contiene el estado:
  // (estas propiedades se actualizan cada vez que ocurre alguno de 
  // los momentos anteriores, por lo tanto la vista también)
  const { loading, error, data } = state;

  // si esta cargando...
  if (loading) return <div>loading...</div>

  // si hubo un error...
  if (error) return <div>Oops! Something went wrong: {error}</div>

  // si cargó sin problemas:
  return <div>Response: {data}</div>
}
1
  • Muchas gracias! entiendo pero esto lo estoy haciendo por que tengo un solo reducer donde esta todo ahi y solo se maneja con un loading esto, se me habia ocurido hacerlo con promesas o con un objeto loading: {users: false, projects: false} supongo que es mejor opcion esta entonces?
    – Lucapa
    el 25 ago. 2022 a las 17:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.