Estoy un poco confundido sobre el enfoque de carga de datos. Por lo tanto, quiero mostrar la pantalla de carga en la carga de la página hasta que se carguen todos los datos, mi enfoque es hacer que cada método de búsqueda en esta página tenga un estado de carga. aquí estoy usando redux con thunk para despachar la acción async .

tipos de acciones:

 export const IS_LOADING_SKILLS = "IS_LOADING_SKILLS"; export const SET_SKILLS = "SET_SKILLS"; export const IS_LOADING_INTRO = "IS_LOADING_INTRO"; export const SET_INTRO = "SET_INTRO"; 

comportamiento:

 import { SET_SKILLS, SET_INTRO,IS_LOADING_INTRO,IS_LOADING_SKILLS} from "./actions-type" export const fetchSkills = () ={amp}gt; { return (dispatch) ={amp}gt; { dispatch(isLoadingSkills(true)); await api.get(url) .then(({ data }) ={amp}gt; dispatch(setSkills(data))); dispatch(isLoadingSkills(false)); } } export const fetchIntro = () ={amp}gt; { return (dispatch) ={amp}gt; { dispatch(isLoadingIntro(true)); await api.get(url) .then(({ data }) ={amp}gt; dispatch(setIntro(data))); dispatch(isLoadingIntro(false)); } } const setSkills = (payload) ={amp}gt; { return { type: SET_SKILLS, payload: payload } } const setIntro = (payload) ={amp}gt; { return { type: SET_INTRO, payload: payload } } const isLoadingSkills = (payload)={amp}gt;{ return{ type:IS_LOADING_SKILLS, payload:payload } } const isLoadingIntro = (payload)={amp}gt;{ return{ type:IS_LOADING_INTRO, payload:payload } } 

estado:

 const InitialState ={ loading:{ loadingIntro:false, loadingSkills:false }, data:{ intro:"", skills:[], } } 

ahora cuando ambos estados de carga para cada método de obtención de datos se vuelven falsos, la pantalla de carga desaparecerá. Quiero saber si este es un buen enfoque o qué es mejor, explique. ¡gracias!

Este es un buen enfoque, pero su código tiene algunas partes extrañas. Utilice async / await o .then / .catch callbacks (no olvide el .catch, podría enviar una acción setErrorMessage más o menos).

Entonces, con promesas que harías:

 export const fetchSkills = () ={amp}gt; { return (dispatch) ={amp}gt; { dispatch(isLoadingSkills(true)); api.get( .then(({ data }) ={amp}gt; { dispatch(setSkills(data))); dispatch(isLoadingSkills(false)); }) .catch((error) ={amp}gt; ...stuff) } } export const fetchIntro = () ={amp}gt; { return (dispatch) ={amp}gt; { dispatch(isLoadingIntro(true)); api.get(url) .then(({ data }) ={amp}gt; { dispatch(setIntro(data))); dispatch(isLoadingIntro(false)); }) .catch((error) ={amp}gt; ...stuff) } } 

Y con async / wait harías:

 export const fetchSkills = () ={amp}gt; { return async (dispatch) ={amp}gt; { try { dispatch(isLoadingSkills(true)); const { data } = await api.get(url) dispatch(setSkills(data))); dispatch(isLoadingSkills(false)); } catch(error) { ...stuff } } } export const fetchIntro = () ={amp}gt; { return async (dispatch) ={amp}gt; { try { dispatch(isLoadingIntro(true)); const { data } = await api.get(url) dispatch(setIntro(data))); dispatch(isLoadingIntro(false)); } catch(error) { ...stuff } } } 

Recuerde que async / waitit es solo azúcar sintáctico para promesas. En lugar de usar .then y .catch en una promesa, solo define la función usando waitit como async (que le permite usar await AND devuelve una promesa), y tendrá que intentar / catch para detectar cualquier error que pueda ocurrir mientras lo hace la solicitud.

tcanusso

es un nuevo contribuyente a este sitio. Tenga cuidado al pedir aclaraciones, comentarios y respuestas. Mira nuestro

Código de Conducta

.