12

¿Cómo funciona redux-thunk?

21458Puntos

hace un mes

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

Curso de Integración Backend con Frontend

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.

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
Curso de Integración Backend con Frontend

Curso de Integración Backend con Frontend

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

21458Puntos

hace un mes

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
3
920Puntos

excelente información

2
39Puntos

run 3 I think this is an informative post and it is very useful and knowledgeable. therefore, I would like to thank you for the efforts you have made in writing this article.

1
346Puntos

¿tienen cursos de react-redux-hooks?

2
103Puntos
un mes

Tengo entendido que con hooks, no hay necesidad de usar redux. Estoy apenas aprendiendo hooks pero he leído algo al respecto.

2
un mes

Yep, puedes tener tu propia store y tus propios reducers, usando directamente useState(), no es necesario usar la libreria de redux ya, es mas mejor no usarlo, ya que como mas librerias uses, mas va a tardar tu pagina web en cargar.