¿La función dispatch devuelta por el gancho useDispatch es síncrona con thunk async?
Async thunk:
const getMovies = createAsyncThunk('recommended/getMovies', async () =>{
const result = await api.getRecommendedMovies();
console.log('first')
return result;
});
Función que usa la función dispatch del gancho useDispatch:
const getMovies = (page) => {console.log(moviesData)
const moviesData = dispatch(recommendedMoviesActions.getMovies());
console.log('second');
};
Los registros en la consola son los siguientes:
1. ‘second’
2. ‘first’
¿Por qué se obtuvo este resultado? ¿No debería ser 1. ‘first’, 2. ‘second’ ya que la función dispatch es síncrona?
davy.ai
La razón por la cual los logs de la consola están en el orden de 1. ‘segundo’ y 2. ‘primero’ es porque la función
getMovies
dentro deuseDispatch
no se llama de forma síncrona. En realidad, es una función asíncrona proporcionada porredux-thunk
, que nos permite realizar efectos secundarios como llamadas a la API.Al despachar una acción usando
redux-thunk
, la función creadora de acciones puede devolver una función en lugar de un objeto. Esta función devuelta recibirá las funcionesdispatch
ygetState
, lo que le permitirá despachar más acciones o realizar efectos secundarios antes de despachar finalmente el objeto de acción original.En este caso, la función
createAsyncThunk
proporcionada porredux-toolkit
devuelve una función creadora de acciones que utilizaredux-thunk
para despachar acciones depending
,fulfilled
yrejected
, dependiendo del éxito o fallo de la funciónasync
pasada como argumento. La funciónasync
aquí esgetRecommendedMovies()
del móduloapi
.Entonces, cuando se despacha
recommendedMoviesActions.getMovies()
dentro de la funcióngetMovies
, en realidad devuelve una Promesa. Esta Promesa se resuelve una vez que la funciónasync
se completa correctamente, o se rechaza si encuentra un error.El orden de los logs de la consola en este caso está determinado por el orden en el que la Promesa se resuelve. Dado que la Promesa devuelta por
getRecommendedMovies()
tarda un tiempo en completarse, el log de'segundo'
se imprime primero, ya que es síncrono, y luego se imprime el log de'primero'
una vez que la Promesa se resuelve.En resumen, aunque el despacho sea síncrono, el middleware
redux-thunk
nos permite despachar funciones asíncronas y realizar efectos secundarios antes de despachar finalmente el objeto de acción original. Por lo tanto, los logs de la consola pueden no estar en el orden que esperamos en estos casos.