0

Tengo esta funcion que me trae la informacion del usuario que inició sesion, esta funcion recibe el tokenhace la consulta y trae la respectiva información

export const getUserData = async (token) => {
  const x = await apiFetch({
    url: 'https://car2/users/profile',
    header: {"Authorization" : `Bearer ${token}`}
  })
  return x;
}

Ahora en mi acción de redux, tengo la función fetchUser que hace la consulta y trae la info del usuario, y envia al reducer, data guarda la info del usuario que inició sesión

const fetchUserSuccess = (user) => ({
      type: GET_USER,
      payload: user,
    });

export const fetchUser = () => {
  return async (dispatch) => {   
    const {data} = await getUserData();
    if(data){
      dispatch(fetchUserSuccess(data));
    }
  }
}

El reducer

import { GET_USER} from "../actions/userActions";

const initState = {
  user: {},
};

const userReducer = (state = initState, action) => {
  
  
  if (action.type === GET_USER) {
    return {
      ...state,
      user: { ...state.user, ...action.payload },
    };
  }

  return state;
};


export default userReducer;

Quiero que esto se ejecute al cargar la pagina, y se envie al estado de redux, para eso, hice lo siguiente en mi index.js, esto actualiza el estado global, pero no inmediatamente después de cargar la página, si no que para que lo haga toca recargar otra vez la página, como podría lograr la actualización del estado una vez carga la pagina por primera vez (y cuando se recargue), Gracias por la ayuda

import { fetchwls } from './redux/actions/wishlistActions'
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import store from "./redux/store/store";

store.dispatch(fetchwls());


ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

serviceWorker.unregister();
1
  • ¿Y si se mueve store.dispatch(fetchwls()) dentro de App? No estoy seguro de si el re-render vuelve a disparar store.dispatch(fetchwls()); menciono esto porque el re-render empieza en el nodo padre, que este caso es App, y en el ejemplo esta afuera de App
    – g.4
    el 11 feb. 2022 a las 1:15

2 respuestas 2

0

Te recomiendo que le eches un ojos a algunos hooks, en particular a useEffect, que podrías usar de esta manera en tu caso particular, no en index.js, no es recomendable, crea otro componente para eso:

import React, { useEffect } from 'react';

// Importar useDispatch para poder hacer "dispatch" de las acciones
import { useDispatch } from 'react-redux'

function Example() {

    const dispatch = useDispatch();


  // Aquí usamos useEffect, cada vez que este componente se renderice o re-renderice, va a ejecutar todo el código que esté dentro, a menos que se agregue el segundo parametro
  useEffect(() => {
      dispatch(tuAcción())
     // Si agregas una variable dentro del array de abajo, el código se volverá a ejecutar siempre y cuando cambie el valor de la variable o variables que le pases a useEffect
  }, []);

  return (
    <div>
      <p>Texto de prueba</p>
    </div>
  );
}

Es un pequeño código de ejemplo, naturalmente tienes que importar las acciones desde el path de dónde las tengas, para poderlas llamar.

1
  • Hola Diego, lo hice tal cual y llamé el componente en el app, antes del swith de react router dom, y pasa lo mismo hay que recargar la pagina para actualizar, me tocó colocarlo dentro de la ruta del Home, aunque esa no era la idea el 10 feb. 2022 a las 14:16
0

mira. es facil:

En index, on en app o en donde queiras haz esto:

useEffect(() => {
    fetch('tu_ruta_api', {
      headers: {
        'Authorization': `Bearer ${token}`,
        'Accept': 'application/json',
      }
    })
      .then(response => response.json())
      .then(jsonResponse => {
          dispatch(fetchUserSuccess(data)); // guarda la info en el estado de Redux
      })
}, [])

Eso ya te actualiza el estado de redux automaticamente cuando recibe los datos del servidor.

Así que en cualquier otro componente de la app puedes acceder a esos datos (de redux) con el useSelector.

Compruebalo así en cualquier componente:

const state = useSelector(state => state.user)
// yo he puesto "user" en state.user, tu tienes que poner el nombre
// que le has dado a tu reducer en el archivo store.js
...
return (
<div>{user.name}<div>
)

Tu pides como "recargar el estado de Redux" pero es que al hacer el dispatch ya modificas y recargas el estado, no tienes que hacer nada más para ello.

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.