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>
}