es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿La función dispatch devuelta por el gancho useDispatch es síncrona con thunk async?

05 Aug, 2023 Programación

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?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    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 de useDispatch no se llama de forma síncrona. En realidad, es una función asíncrona proporcionada por redux-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 funciones dispatch y getState, 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 por redux-toolkit devuelve una función creadora de acciones que utiliza redux-thunk para despachar acciones de pending, fulfilled y rejected, dependiendo del éxito o fallo de la función async pasada como argumento. La función async aquí es getRecommendedMovies() del módulo api.

    Entonces, cuando se despacha recommendedMoviesActions.getMovies() dentro de la función getMovies, en realidad devuelve una Promesa. Esta Promesa se resuelve una vez que la función async 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.

Comments are closed.