useReducer en 20 min (y crea una lista de tareas)

En este vídeo te contamos cómo usar el useReducer hook paso a paso. Crearemos una lista de tareas en la que podrás añadir y quitar tareas en solo 20 minutos.
👉 Conoce nuestras vacantes actuales de tecnología en bit.ly/talento...
Si quieres aprender más de programación, te dejamos por aquí otros Garaje Code Pills que seguro que te gustarán:
useState Hook en 20 minutos: • useState Hook en 20 mi...
useContext en 20 minutos: • useContext en 20 minutos
useEffect en 20 minutos: • useEffect en 20 minutos
Aquí tienes el código por si quieres usarlo:
github.com/Gar...
Esta introducción al useReducer Hook fue impartida por Mario Girón, Senior Full Stack Developer:
/ mariogironm
Si quieres estar al tanto de todo lo que hacemos, puedes inscribirte aquí 👇
garajedeideas....
----------
Garaje de Ideas es un estudio de Diseño, Tecnología y Data. En este canal encontrarás tutoriales, cursos y ejemplos prácticos paso a paso de desarrollo web y programación.
Podrás encontrar desde cursos de JavaScript, Node.js, D3.js, Vue3, Typescript, HTML, CSS, React... hasta cómo optimizar tu proceso de trabajo.

[@andersonpineda8875]

Que gran manera de enseñar, es justo lo que buscaba, casos prácticos y simples, pero también que me serviran en casos reales. Muchas gracias.

[@rubenmontani7487]

Crack! siempre regreso a tu canal para algo mas. Re contento q exista gente predispuesta a dar estos conocimientos. Estoy metiendome a la programacion, quiero laburar en esto y estoy reafirmando conocimientos, tu canal lo visite varias veces entre cursos ,aun algunos siendo pagos, requieren de una explicacion como la tuya tan clara y precisa! asi q yo re contento de lo q subis!!!

[@williansang.4946]

Eres un Maestro un Crack. La Naturalidad con la que tienes interiorizado estos conceptos, se nota que lo manejas como pez en el agua, y entiendes al 100% lo que dices por eso el codigo sale de manera organica y tan Natural. Definitavamente de Grande quiero ser como tu un Capo de Capos en React !!

[@ramonsaavedra7904]

Yo NO se porque este senor no hace su propio canal y brinda su experiencia... Explica como un DIOS. Todo se entiende MARIO.. Crea tu propio canal

[@Garajedeideas]

Mario es como el multiverso, está en varios sitios y uno de ellos es Garaje :). Igualmente le animaremos a que se haga un canal. Mientras os seguiremos aportando contenido de calidad de su mano ;)

[@carlosfranco8377]

Todo muy bien explicado! Y siempre diciendo el porqué de lo que aplicas! Que grande!!!!

[@giorgioantoineo.7024]

Tremendo profesor que eres, gracias por tan buenas explicaciones ejemplificadas!

[@papa-gamer]

El mejor tutorial sobre el tema que encontré hasta ahora!! Gracias :)

[@IdequelBernabel]

Lo explicas muy bien, de una forma clara. Lo entendí todo. Muchas gracias! 👍

[@anibalmancilla8903]

hermano explicas muy bien, tienes un don para explicar cosas complejas de maneras muy sencillas, muchas gracias por el video. Seria Bueno que hagas cursos en udemy u otras plataformas compartiendo tus conocimiento, muchas gracias nuevamente. Saludos.

[@rodrigoayarza9397]

Gracias. Que fluidez en la explicación.

[@Garajedeideas]

Gracias a ti! Nos alegramos mucho de que te sirva de ayuda :)

[@shirleyporroa]

Me ha encantado el video al igual que el resto opino que tu explicación ha hecho la direferencia respecto a otros, la esencillez en lenguage y la visulización clara del contenido han hecho de tu vídeo un placer. No me gusta escribir muchas opiniones pero esta vez me lo salto. Gracias por tu contenido.

[@Garajedeideas]

👉 ¡En Garaje seguimos creciendo! Únete al equipo: bit.ly/talento-tech-GDI

[@collinzuniga5410]

Vi este video y me di cuenta que el Reducer lo entendía a medias, ya lo entiendo mejor

[@nicolasfelipe1]

tremenda explicación, gracias! había visto varios videos pero ninguno tan claro como el tuyo.

[@xerot2010]

Muy bueno , conciso y bien explicado!

[@ramirogordillo4629]

Muchas Gracias, muy buena explicación, por fin pude entender !!! y en tiempo record !!!

[@CADAJUME1]

Gracias, excelente vídeo !

[@glpereyraar]

en 20 minutos entendí lo que el profesor me hizo comer en 4 horas de videos llevándome de aquí a allí con mil archivos. GRACIAS!

[@nicolasfelipe1]

similar, hasta de cursos pagos no entendia bien ese tal reducer vs el usestate.

[@mariogiron]

Me alegro que haya servido

[@PabloRodriguez-yg2zl]

Gracias por la explicación, amigo

[@davidrosenblum4079]

La mejor explicación sobre este tema!!! Mis respetos master!!!

[@flavio5693]

muchas gracias muy bueno el video, por favor tienes un video donde se implementa un CRUD usando useContext y useReducer?

[@beats4all914]

vi tu video de useForm y estoy viendo este y hasta ahora son la hostia como dirían los españoles jaja

[@josemartinez-ue7qj]

Gracias maquina

[@Vekjs07]

Crack excelente video 🎉

[@mishelrodri]

Que crack !! Tan facíl de entender ⚡

[@Garajedeideas]

Gracias por tu comentario! 😊 Nos alegramos mucho de que nuestros vídeos te sirvan de ayuda!

[@alerxses]

I love it.

[@moiseshn2461]

muy buena explicación, me encontré con un problema el index se repite al crear otro task, como podría resolverlo?

[@Garajedeideas]

Hola Moises, deberías comprobar si se están agregando correctamente las tareas dentro del array ya que el índice lo estamos generando a partir de ese número de tareas

[@minimegahd]

Hola me encantó el video pero tengo un problema, como puedo acceder al id de la tarea sin usar una funcion flecha? Saludos

[@mariogiron]

No entiendo muy bien la pregunta. Si iteras el array de tareas, puedes acceder a cada uno de los ids a través de task.id

[@fr4n08]

Hola!! Una duda, porque al usar el método MAP( ), se pone como segundo paramentro "INDEX". En si, entiendo el motivo (que es para crear un id único a cada elemento) pero mi duda es, de donde sale ese index o a que parte del código corresponde. Muchas gracias, BUEN VIDEO!!

[@mariogiron]

Es por la propia definición de map. Siempre se puede extraer el índice que estás recorriendo. Revisa la documentación oficial de map que es donde lo explican

[@carlosfranco8377]

En este caso como reaizaria un toggle ? o tachar la tarea ?

[@mariogiron]

Hola :). Tendrías que hacer una nueva acción dentro del reducer a la que le tendrías que hacer llegar el ID de la tarea que quieras modificar (o el índice que ocupa en el array). A partir de ahí, dentro del reducer, recuperar la tarea y modificarla. Casi como el borrado

[@AdriaFabrega]

No entiendo muy bien el uso del && como condicional. En principio no es un and que debería devolver un boleano?

[@PabloRodriguez-yg2zl]

Es una manera elegante de simplificar el operador ternario cuando no te interesa evaluar un "else", básicamente le dices al programa "si existen tareas realiza el siguiente código, de lo contrario no hagas nada". Sería el equivalente a decir tareas ? : null. Utilizando el operador && queda más legible, simplificado y ordenado el código.

[@fernandobenitez2330]

duda, ¿suponiendo que por x razon quieor eliminar TODAS las tareas, como quedaría eso en el reducer?, por ejemplo, para añadir tareas en el reducer es algo asi como : return [...task, action.payload] o algo como return [...state, { id: 1, title: "loquesea"} ] o como esta en el video, PERO ¿Cómo seria para eliminar TODAS las tareas?

[@luisalbertovillarortiz7424]

Fernando, quieres eliminar Todas las tareas o solo una por una ??

[@MonSster-jf7ex]

Simplemente esto: tasks = []

[@henryhcc]

Gracias por el contenido! 👍