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();
store.dispatch(fetchwls())
dentro deApp
? No estoy seguro de si el re-render vuelve a dispararstore.dispatch(fetchwls())
; menciono esto porque el re-render empieza en el nodo padre, que este caso esApp
, y en el ejemplo esta afuera deApp