31

¿Cómo funciona redux-thunk?

56700Puntos

hace 2 años

Curso de Integración Backend con Frontend 2019
Curso de Integración Backend con Frontend 2019

Curso de Integración Backend con Frontend 2019

La ingeniería de software evoluciona día a día, no te quedes atrás. Estas a un paso de ser Desarrollador FullStack JavaScript y necesitas evolucionar con el software, construye arquitecturas de software modernas. Desacopla el backend del frontend de tus aplicaciones sin afectar a tus usuarios. Integra el Backend y el Frontend de nuestro proyecto PlatziVideo. Aprende a implementar el patron Backend for Frontend (BFF) y desarrolla software moderno con tecnologías de última generación.

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!

Curso de Integración Backend con Frontend 2019
Curso de Integración Backend con Frontend 2019

Curso de Integración Backend con Frontend 2019

La ingeniería de software evoluciona día a día, no te quedes atrás. Estas a un paso de ser Desarrollador FullStack JavaScript y necesitas evolucionar con el software, construye arquitecturas de software modernas. Desacopla el backend del frontend de tus aplicaciones sin afectar a tus usuarios. Integra el Backend y el Frontend de nuestro proyecto PlatziVideo. Aprende a implementar el patron Backend for Frontend (BFF) y desarrolla software moderno con tecnologías de última generación.
Nestor
Nestor
nescep

56700Puntos

hace 2 años

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

excelente información

2
30161Puntos

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
8648Puntos

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