useReducer - explicado al detalle con 3 mini apps - init - types - actions - React Hooks

Подписаться 7 тыс.

Просмотров 19 тыс.

50% 1

useReducer permite manejar estados complejos de una forma más ordenada 🔥 Aprenderemos:
✅ ¿Que es el hook useReducer?
✅ Ejemplo CounterApp
✅ Ejemplo TodoApp
✅ Ejemplo ProductApp - Múltiples parámetros
✅ Argumento Init
✅ Funcion pura y Reducer
✅ ¿Cuando usar useReducer?
Recursos
⭐ Repositorio de GitHub del proyecto github.com/luismcabrera/useRe...
⭐ Extensiones VSCode utilizadas- ES7 React/Redux/GraphQL/React-Native snippets- Prettier (Formatear código)
🚀 Context API - explicado al detalle - con ejemplo práctico y solución al problema de renders - React • Context API - explicad...
🚀 Crear con React un Componente Contenedor para ventana Modal usando Props Children • Crear con React un Com...
🚀 Custom Hooks - explicado al detalle con 3 ejemplos - Crea tus propios Hooks - React JS
• Custom Hooks - explica...
🚀 React memo, useMemo y useCallback explicado al detalle - Con ejemplo práctico - Optimización
• React memo, useMemo y...
🚀 useRef explicado al detalle - Con 6 mini Apps - React - Scroll Animation Focus, Copy Paste y Más
• useRef explicado al de...
🚀 useEffect explicado al detalle - Con 3 mini Apps - React
• useEffect explicado al...
🚀 useState explicado al detalle - Con 5 mini Apps - React
• useState explicado al ...
🚀 APP Perritos API y Manejo de errores
• React App ✅ DOG API - ...
🚀 APP con Bracking Bad API
• React App ✅ Breaking B...
🚀 Primera APP con React
- Lista de tareas con LocalStorage y despligue a Netlify
• ReactJS con Hooks ✅ ...

Опубликовано:

12 ноя 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 89

@AlejandroSanchez-ls4hh Год назад

Sube más videos por favor!!!, son las mejores explicaciones de todo youtube! Gracias!!!

@ExcipienteCBP 10 месяцев назад

Horas y horas investigando y revisando información y tutoriales para entender este hook; pero no terminaba de entender el concepto. Aquí a la primera, explicas muy bien. Por favor no dejes de crear contenido. Te sigo desde ya.

@martinandonegui7256 Год назад

Injusto que este canal tenga menos de 1 millón de seguidores. Qué bien que entiendo todo acá

@guillermoffunaro6987 Год назад

Una obra de arte hermano, felicitaciones desde Argentina!!

@pablocharamello1559 Год назад

Un genio estimado, eres uno de los mejores explicando! gracias y sigue así porfa!

@tecladista91 2 года назад

Cada vez que necesito refrescar algún tipo de conocimiento, veo tus videos, creo que sos uno de los mejores explicando, sigue subiendo videos que la rompes!!!

@MarisiverMJ 2 года назад

Hola Luis, espero que vuelvas pronto o me adoptes y mentorices porque explicas de fabula. He entendido tantas cosas gracias a ti, q nose como pagarte

@cristianchoque1418 Год назад

tus videos son ORO PURO!!👏👏👏👏

@adanuriplata8443 2 года назад

Explicas muy bien. Gracias por compartir

@ramoneduardogonzalezbenite1480 3 года назад

Estimado, usted es la persona que mejor explica estos temas, lo felicito

@facundocaceres2023 Год назад

Muchísimas gracias, Crack! Espectacular video y explicación!

@alvenisbecerra8443 2 года назад

gracias por tu aporte mi pana. full agradecido, explicas demasiado bien

@mauricioantoni1 2 года назад

Dios bendiga el día que me encontré con tu Canal (15-08-2021). Qué manera tan sencilla y tan clara de explicar todo. Contigo hasta mi mamá podría aprender React. De verdad te felicito. Muchas gracias, un abrazo

@DerlisRuizDiazR 3 года назад

Qué joyas de vídeos !

@LuisCabrera 3 года назад

Gracias amigo 🙂 me alegra que te gusten

@ep4r4 8 месяцев назад

Coño a ti si te entendí, me gusta como explicas en este video, espero ver la misma manera de enseñar en videos siguiente.

@correocorreo7676 Год назад

Fuerte el video. Muy bueno, pero hay que repasarlo varias veces y bueno el ejemplo

@jorgeluisrh3807 2 года назад

bro explicas muy bien, gran aporte

@frenkdev 2 года назад

Eres un genio

@Neil_Jordan Год назад

tremenda clase, muchas gracias :)

@emilianogaming7785 Год назад

Nuevo suscriptor que bien explicas

@phantasmFES 2 года назад

muchas gracias por el video, muy util!

@justinlu5730 2 года назад

La verdad es que tus videos son oro puro, me han ayudado a aclarar muchas dudas.

@jamavocorp 3 года назад

Que bien!!!

@twitch-clipz 2 года назад

Llevo casi 10 horas viendo otros videos de useReduce y en menos de 1 hora explicaste mas a detalle, mejor y mas claro. Sigue subiendo videos, los vere TODOS

@S4MBENTZ Год назад

excelente tutorial

@DarkDragonBloody Год назад

Muchas gracias

@tonyx8613 2 года назад

El contenido de React de este canal es excelente !!!

@gonzalodecastro2550 Год назад

Excelente video, vengo de ver los de useContext. Sos excelente profesor! gracias por todo! PD: tenes la voz igual a N°17 de DBZ.

@LuisCabrera Год назад

jaja nunca me di cuenta

@studipitytries 2 года назад

Muy bueno. A veces no es difícil entender el useReducer, sino en qué momentos utilizarlo. Con estos ejemplos me quedó bien claro. Gracias!!

@INAVACL 2 года назад

esto lo voy a tener que ver 10 veces... que complejo

@davidperdomo9 2 года назад

Explicas muy bien!! te felicito! y muchas gracias por brindarnos estos videos!! Saludos desde Argentina.

@fabian-henao 2 года назад

Sos un crack para explicar, se entiende super claro!

@nihil_um 3 года назад

Buenísimo como siempre. No esperaba menos. Un saludo.

@cristianstafe 2 года назад

Excelente. Lo complete haciendo paso a paso toda la practica. Espero me sirva para ganar en conocimiento. Muchísimas gracias!!

@luiscastillo1444 3 года назад

El Mejor tutorial de useReduce dentro de todos los servidores existentes de RU-vid. Una joya este contenido.

@LuisCabrera 3 года назад

Gracias tocayo Luis por tus palabras saludos!!

@ericcarvajalcortes5206 3 года назад

Muchas gracias amigo ! Aportas mucho valor 👍

@franmartin2758 3 года назад

Muchas gracias por este nuevo video. Esperando ver más!!! Gracias

@LaComitivax 3 года назад

estuve viendo varios de los videos de hooks y ademas de explicar excelente, inculca buenas practicas de desarrollo con react, y eso le da un valor agregado al canal

@LuisCabrera 3 года назад

Gracias por tu comentario :)

@cristiancena5757 3 года назад

Este canal es la gloria!! muchas gracias!!

@Sn-pi9mt 3 года назад

Gracias por la excelente explicación.

@Danny-do6dm Год назад

Gracias por esta genial explicacion, tenia problemas entendiendo useReducer y la parte de update los estados, este video aclaro todas las dudas que tenia!

@cristianroldan337 2 года назад

Que buen video. Un suscriptor más!!! Solo vi este (por el momento) del canal, y me ancantó la forma de escalar la complejidad. Gracias Luis Cabrera!!!

@mauro20GD 2 года назад

Gracias por este video, me sacaste todas las dudas que tenia y lo explicaste de una manera impecable. Un genio

@sebrival Год назад

te ganaste un sub, explicas muy bien y eso que ya termine cursos en udemy de react

@rapustin 3 года назад

Luis! Te extrañaba! Muchas gracias :)

@LuisCabrera 3 года назад

jaja gracias amigo

@jorgellanque7704 2 года назад

Es un video muy pesado, pero vale la pena verlo

@nicksiuxs 3 года назад

Hola Luis, me encantó este video, aclaraste muchas dudas respecto a este hook, ojalá sigas subiendo más contenido de este tipo

@LuisCabrera 3 года назад

Genial :) he estado un buen tiempo sin subir pero pronto retomo

@MarisiverMJ 2 года назад

@@LuisCabrera me alegra mucho leer esto

@YusufSalahAdDin 3 года назад

Ese apunte de no usar funciones dentro del reductor no me lo sabía, aunque no lo hacía así, es bueno saber que no es recomendado. Gracias.

@erickhilario8782 3 года назад

de hecho no hay problema con que uses funciones, siempre y cuando sean funciones puras, lo que si debes evitar son los efectos secundarios y mutaciones de estado.

@RAFAELSISTEM 3 года назад

1:00:32 init

@dantefrias 3 года назад

Hola profe Luis, excelente material, como siempre! Al respecto una consulta, qué libros nos podría recomendar para obtener una base más sólida de React una vistos sus vídeos A1. Gracias anticipadas

@LuisCabrera 3 года назад

Hola Dante! Te soy sincero con React he leido mucho material pero ni un libro jaja pero si planeo hacerlo (No sigas mi ejemplo) Yo he hecho así: Primero me ayude con videos introductorios hasta entender lo básico, luego me fui a la documentación pero la usé sólo de índice por que no es tan didáctica para mi gusto Entonces con el titulo de cada tema busqué muchos ejemplos y casos de uso en google y sobre todo en medium, cuando un tema era muy abstracto buscaba tambien ejemplos en video (Casi siempre en inglés por que había mayor cantidad de contenido) Y básicamente así es como he ido profundizando en react jaja

@edwindev 2 года назад

Tengo dos situaciones, la primera es que el valor por defecto que me carga siempre es el último valor del state y no sé si sea correcto y lo segundo: ¿Por qué elegirlo por encima del useState que al parecer es más sencillo?( Minutos 13:05 ). Saludos y gracias por compartir contenido.

@emmanuelqt 3 года назад

Mil gracias, al ver la "logica de uso" del useReducer se me ocurre que se puede hacer lo mismo con un customHook-useSate y crear una sola funcion dispatch para modificar el state que reciba el action y el payload de la misma forma, salvo el caso de no tener la funcion init existe alguna otra diferencia? mil gracias.

@LuisCabrera 3 года назад

Si se podría, hace un tiempo vi un ejemplo a la inversa, construyendo el useState con el useReducer

@emmanuelqt 3 года назад

@@LuisCabrera gracias por tu trabajo

@juangaytan4527 3 года назад

Explicas muy bien bro, tienes cursos de udemy?

@LuisCabrera 3 года назад

Gracias amigo Juan, no tengo cursos en Udemy

@franciscominen9965 3 года назад

Hola que tal Luis? Estoy teniendo un problema con la app nro 2 (todo), primero que nada combine esa app con el useContext de tu otro video, lo que me pasa es que al querer hacer el update me dice que state.map() is not a function, hice el case y el dispatch en el button igual que en el video, tendrá que ver algo de Context? o de useState que contiene el valor de text? Gracias !!

@LuisCabrera 3 года назад

Normalmente ese mensaje de error ocurre cuando el tipo de dato del state no es Array al ejecutar state.map() Si tienes algun estado inicial diferente a un arreglo podrias intentar con state?.map() Si esto no te funciona seria revisar que del context se extraigan los datos correctamente 🙂 Cualquier duda vuelves a comentar

@ospina5367 3 года назад

Si están usando VSCode pueden usar el snippet _rafce y ya no les importa react

@xde214 2 года назад

Una pregunta: ¿Setear un valor en el localstorage dentro del reducer hace que este ya no sea una función pura? , estoy haciendo la petición a la api dentro del reducer y no se si sea una buena practica.

@LuisCabrera 2 года назад

Hola! Lo ideal es hacer eso fuera del reducer, que este último solo cambie el estado

@haguerrerob 2 года назад

@@LuisCabrera Hola Luis, veo que si andas por acá de vez en cuando. Saludos y muy agradecido por todos tus vídeos.

@edustreamimg 3 года назад

Hola Luis, una duda. useReducer es una solucion alternativa a redux? o hay funciones que se pueden hacer con redux y no con useReducer?

@LuisCabrera 3 года назад

Hola Eduardo, Redux tiene más cosas, prueba los dos y así te das cuenta

@Sn-pi9mt 3 года назад

Hola, tengo una pregunta. Es necesario envolver el case entre llaves para poder hacer alguna operación antes del return ej: case types.something: { someFunction return state } Ya que he notado que se pueden realizar sin envolver el case en {}

@LuisCabrera 3 года назад

Así como comentas no es necesario, es opcional en caso de que necesites más de una línea de código dentro del case

@Sn-pi9mt 3 года назад

@@LuisCabrera entiendo, gracias por la respuesta.

@edustreamimg 3 года назад

Se puede llamadas asincronas para modificar el estado dentro del reducer?

@LuisCabrera 3 года назад

Por lo general las llamadas asíncronas se hacen externas al reducer y al resolver la promesa se haría el dispatch del action

@edustreamimg 3 года назад

@@LuisCabrera Tienes algún ejemplo?

3 года назад

Hola, consulta rápida. Con esto se podría reemplazar redux?

@LuisCabrera 3 года назад

Ya queda a tu decision 🙂

@YusufSalahAdDin 3 года назад

Entonces, si yo pongo la función entre corchetes esta se ejecuta sin importar si se da click o no en el botón?

@LuisCabrera 3 года назад

Hola amigo! no te comprendí muy bien, me puedes detallar mejor o quizá mencionarme un minuto y segundo del video para así revisar

@YusufSalahAdDin 3 года назад

@@LuisCabrera cuando mencionas que hay que poner los despachadores como funciones flecha para que sólo sean ejecutados cuando se pulsa en el botón.

@LuisCabrera 3 года назад

@@YusufSalahAdDin Ok si haces onClick={dispatch} o cualquier función que no se ejecute allí mismo "Sín los () " no pasaría nada, pero como necesitas pasarle un parámetro "dispatch(action)" la función se ejecutará, actualizando el store, volviendo a renderizar el componente y por lo tanto volviendo a ejecutar "dispatch(action)" en un ciclo infinito, de hecho puedes intentarlo y visualizarás el error La solución es enviar el dispatch como retorno de otra función o en resumen mal dicho pero más facil de recordar jeje "como función de flecha" () => dispatch(action), así lo que se ejecutará será la función anónima retorando la función que queremos que siga allí al presionar en click Como resultado final funcionará el onClick como se desea sin renders infinitos