17

¿Cómo funciona redux-thunk?

33633Puntos

hace 6 meses

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

33633Puntos

hace 6 meses

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

excelente información

1
347Puntos

¿tienen cursos de react-redux-hooks?

3
139Puntos
6 meses

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

3
6 meses

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.

3
77414Puntos
4 meses

1️⃣ Los Hooks no tienen absolutamente NADA que ver con la “muerte” de Redux.

2️⃣ Redux es sumamente ligero. El peso no es un problema. Más bien, es la complejidad que le añades a tu aplicación. Puede que no sea necesaria.

3️⃣ Tenemos cursos de Redux, React-Redux o React-Router + React-Redux. Y obviamente, estudiamos los Hooks.

Te recomiendo estas lecturas:

👉 Redux NO está muerto, pero tú no lo sabes usar: ¡Larga vida a Redux!
👉 How To Use Redux with React Hooks
👉 Using Redux with React Hooks - Should You Though?

1
2324Puntos
3 meses

@juandc No estoy de acuerdo, ya que los nuevos features en React dan la impresión de ir por el camino de eliminar Redux, en el primer artículo que envías la conferencia de Dan Abramov es del 2015 un tanto desactualizada, implementando React Context API y si a eso le añades el uso de React Hooks para que todo siga la misma línea podrías perfectamente reemplazar Redux, ya que en React puedes usar el useContext, useReducer, acciones y llegar a un patrón flux perfectamente.
Saludos!

1
139Puntos
2 meses

En lo personal estoy aprendiendo React, no pienso aprender Redux hasta aprender bien hooks y si los hooks lo remplazan no veo por que enfocar mis energías en aprender Redux.

1
77414Puntos
2 meses

Puedes usar Hooks y Redux al mismo tiempo, se complementan muy bien.

1
11391Puntos

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