¿Cómo funciona redux-thunk?

Cuando usamos un Redux Store básico, lo único que puedes hacer son actualizaciones síncronas sencillas por medio de una acción. Pero si quieres trabajar con lógica asíncrona para interactuar con el Store, necesitarás algo más. Aquí es donde entra redux-thunk.

Un middleware actúa como un puente entre un sistema operativo o base de datos y aplicaciones. En este caso específico, un thunk es una función que actúa como un wrapper ya que envuelve una expresión para retrasar su evaluación.

Imagina una función foo que actúa como un thunk de forma que retrasa el cálculo, 1 + 2.

Los inventores del Thunk acuñaron este término “después que se dieron cuenta (en las primeras horas después de las horas de discusión) que el tipo de argumento “Algol-60” podría deducirse de antemano con un poco de tiempo de compilación” según dijo el desarrollador y autor Eric Raymond.

La palabra Thunk fue entonces acuñada como “algo ya pensado”, y una terrible conjugación del pasado de “think” (recuerda que la conjugación real es “thought” XD)

Redux-thunk te permite escribir creadores de acciones que retornan una función en vez de un objeto de acción típico. Entonces, el thunk puede ser usado para retrasar el envío de una acción hasta que se cumpla una línea de código asíncrona.

Paso a paso de un proceso con Redux-Thunk

Verificar la acción entrante

Si es una acción regular, redux-thunk no hace nada y la acción es procesada por el reducer del Store.

Si la acción es una función

Redux-thunk la invoca y usa los métodos dispatch y getState y cualquier argumento adicional.

Después que la función se ejecute

El thunk envía la acción, la cual actualizará el estado como corresponde.

En otras palabras, un redux-thunk está compuesto de un “creador thunk” (creador de acciones asincrónicas) y “el mismo thunk” el cual es la función que devuelve el “creador Thunk” y acepta el dispatch y setState como argumentos.

Conoce estas buenas prácticas al usar Redux y profundiza en el tema.

Finalmente, si quieres adentrarte en el mundo de un Full-Stack Developer y ampliar conocimientos en React y JS te recomiendo el Curso de Integración Backend con Frontend ¡Aprenderás todas las herramientas necesarias para prosperar en este ambicioso campo!