0

Tengo el siguiente problema, estoy perdiendo los datos de la aplicacion, les explico como esta estructurada la aplicacion.Primero aclarar que no estoy usando Redux ni pretendo incorporarlo. EL estado lo estoy manejando a travez de context y useReducer.Todo el flujo para manejar el estado y acceder al estado me funciona bien. El problema en todo esto es que en el reducer.js mi estado inicial es este:

const INITIAL_STATE = {
  loading: true,
  books: [],
  recents: [],
  error: null,
};

Como se ve el arreglo books inicialmente es un arreglo vacio, cuando se carga mi primera ruta / , en el useEffect se llama al API y a este arreglo se le asignan valores, cuando paso a otra ruta, por ejemplo /about accedo al arreglo y los datos estan. El problema comienza cuando en esa ruta /about refresco el navegador**(tocando f5 )** , se hace el re-render y pierdo los datos del array.

Mi pregunta es:

Como puedo la 1ra vez que traigo los datos del API guardarlo y no perderlos mas?

Si necesitan ver codigo de alguna parte de la logica pidanmelo , no puse todos los ficheros implicados por que son bastantes

3
  • Una forma es usando localStorage
    – g.4
    Commented el 25 abr. 2021 a las 4:08
  • Pero imagina que el arreglo tenga , 10000 elementos, no creo que sea el local storage, la mejor opcion
    – Asney
    Commented el 25 abr. 2021 a las 18:38
  • Si son tantos registros lo mejor no seria hacer una llamada a la api para obtenerlos?
    – Jamt0
    Commented el 28 abr. 2021 a las 1:50

1 respuesta 1

0

Basicamente siempre que refresques tus datos se perderan, cada que refresques debes hacer la peticion nuevamente, esto no ocurre siempre ya que tu aplicacion es SPA, no recarga pero si tu lo haces manualmente debes hacer la peticion de nuevo, debes iniciar el estado en loading:false, y pones un if en el useEffect que si loading===false haga la peticion y cuando te trae los datos pones loading=true para que no tengas un bucle infinito Ejemplo

      export const STATUS_LOADING = "LOADING";
        export const STATUS_NOT_LOADED = "NOT_LOADED";
        export const STATUS_LOADED = "LOADED";
    
            let initialState= {
        statusBooks: {
               status: STATUS_NOT_LOADED,
                books: [],
              }
            };
              useEffect(() => {
                if (statusBooks.status === STATUS_NOT_LOADED) {
     setstatusBooks({ ...statusBooks, status: STATUS_LOADING });
                  client()
                    .get(`audit/analyze/allStatus`, {})
                    .then(({ data }) => {
                      if (data) {
                        setstatusBooks({ ...statusBooks, books: data, status: STATUS_LOADED });
                      }
                    })
                    .catch((e) => {
                      if (e.request.status === 401) {
                        logout();
                      } else if (e.request.status === 422) {
                        setErrors({ error: e.response.data, status: true });
                      } else if (e.request.status === 403) {
                        history.push("../../app/unauthorized");
                      } else {
                        alertError("Error al buscar los libros");
                      }
                    });
                }
              }, []); 

Tu Respuesta

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

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