32

¿Cómo funciona redux-thunk?

58430Puntos

hace 5 años

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.

Redux

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.

part1

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.

thunk

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!

Néstor Iván
Néstor Iván
nescep

58430Puntos

hace 5 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
4
1160Puntos

excelente información

2
33485Puntos

Buen articulo para complementar las clases del curso de integración backend con frontend.

1

Excelente aporte, me ayudo a comprender realmente redux-thunk.

0
9452Puntos

Buena data. Muy clara la explicación. Gracias.