Qué es Redux ? Qué es Context ? cúando y cómo usar cada uno con CRUD de ejemplo a una API en ReactJS

[@riut49]

es completamente válido y, de hecho, bastante común, utilizar Redux para gestionar el estado global de tu aplicación y la Context API de React para gestionar estados locales de componentes anidados que no necesariamente deben estar de manera global.

[@eduprojects3187]

Gracias tio Luigui ...buen video ; )

[@GentlemanProgramming]

De nada !! 🥸

[@enmimaquinaandaba]

¡Gracias! Me re sirvió tu video, recién me estoy metiendo de lleno en Redux (ya manejaba context) y necesitaba resolver algo puntual del laburo, y mis otras opciones eran comprar un curso entero de React solo para esta información

[@GentlemanProgramming]

Ey ! Muchas muchas gracias !!! Es un privilegio haberte podido ayudar !!!! 😍😍

[@hectorb.calles5943]

Yo te odio pero por tener un bigote tan jodidamente perfecto, jajaj que envidia mi hermano! gran video me ayudo muchisimo!

[@d-landjs]

Muy bueno!!! Seria genial ver un proyecto desde 0, espero un tuto que seria de ayuda :D

[@OPlutarch]

La calidad de tus vídeos son las de un canal grande, te felicito y agradezco por la dedicación concienzuda con la que explicas.

[@GentlemanProgramming]

Gracias miles Plutarch, estoy viendo la manera de aumentar más la calidad pero los tiempos se me complican. Vamos a por más !

[@SimaDamian]

Hola, sobre el minuto 33:00 es solo un caso de uso (ojo). no siempre aplica el mecanismo de guardar el valor. En caso de que el back solamente haga un pasa manos a DB podría ser, pero en otros casos cuando la lógica de dominio existe, pues, no sería correcto. Saludos

[@GentlemanProgramming]

Exactamente, como lo explico debería ser así siempre y cuando no exista la posiblidad de multi usuarios accionando sobre los mismos datos, en este caso sí que tenemos que volver a pedir al back informacion luego de cada accion para volver a obtener datos. También te recomiendo ver mis vídeos de SWR que brinda una nueva solución a este problem ! Muchas gracias por el comment :D

[@nemines001]

saludos muchas de casualidad ya los proyectos que voy haciendo me van requiriendo mas manejo de datos desde distintos lugares de la app

[@williamdevjs9974]

my buen video y el github de ese codigo

[@GentlemanProgramming]

Apenas tengo tiempo lo subiré :)

[@Broly94]

Es redux toolkit lo que usas?

[@GentlemanProgramming]

Yes !!

[@matiasromera330]

muy buen video che!! sos impecable, ahora, hubiera estado épico que también incluyeras useReducer y hacer la comparativa, porque como vos decís useContext sirve para evitar el prop drilling pero Facebook se inspiró en Redux para desarrollar useReducer, me voy porque tengo bocha de videos tuyos para seguir viendo jaja

[@juancruzledesma5693]

Vos sabes que justo en eso pensaba

[@GentlemanProgramming]

Muchas gracias por el comment ! El useReducer es algo que tengo en planes de dar, pero igualmente ojo porque React mismo recomienda no usar context como Redux, por eso siempre digo que son para cosas diferentes 😇

[@Brunato77]

Muchas gracias por compartir este video, me resultó super claro y util!. Saludos

[@flaviobravosantos9723]

hay repo de este ejemplo?

[@GentlemanProgramming]

De este en especíifico no, pero puedes buscar Gentleman Programming en Github y tienes mas de 50 repositorios con ejemplos varios

[@nicolasdebiaggi776]

tenes un link al repo para verlo en mas detalle?

[@GentlemanProgramming]

Voy a tratar de conseguirlo lo antes posible y a informarlo en un post

[@gonzalobuasso1421]

Hola Alan... un genio total... te hago una consulta, que recomendas para conectar una app de react con redux-toolkit a una api?? directamente con axios o algun tipo de thunks?? Saludos

[@GentlemanProgramming]

Yo generalmente uso Axios ! pero es muy según lo que ya dispongas o tengas que hacer con tu proyecto. En mi caso le saco mucho jugo a los interceptores que este dispone 🤓

[@rauljcamacho]

Muy bueno Alan. Soy nuevo en tu comunidad de youtube he visto varios de tus videos y son excelente. Gracias por los aportes.

[@GentlemanProgramming]

Muchas gracias Raul ! Para lo que necesites ;)

[@angelfigueroa6662]

Amigo disculpa lo visto en este video es redux o redux toolkit? Según tengo entendido son diferentes porque en redux normal he visto que usan en el export el connect y ahí sale el dispatch.y en este video veo que usas useDispatch. Por cierto tienes link de ese repo? Me ayudaría muchísimo analizarlo de primera mano

[@GentlemanProgramming]

Redux toolkit ! Si me das un tiempo puede que lo consiga :)

[@alexanderortiz2820]

vengo de vue y comparto eso de que context puede vivir con redux, ciertamente context no debería manejar el estado global ya que la misma palabra lo dice sirve para manejar el contexto de un componente y anidados

[@GentlemanProgramming]

Exactamente !! alguien que lo entiende 😇

[@AGriffith]

Hola buen video!, sin embargo me parece incorrecto lo de modificar el state sin tener una respuesta del backend, siempre puede existir un error para lo cual es necesario esperar la respuesta del backend y una vez se compruebe que se hizo correctamente, entonces ahí sí modificamos el state, hay que recordar que nosotros no cambiamos el valor, nosotros damos la orden al backend para cambiar el valor, pero el que se encarga de hacerlo es el endpoint del backend, por lo tanto no hay que asumir que sí se cambió porque cuando exista un error, el usuario verá que el valor cambió en el frontend pero cuando refresque el valor no se verá modificado, lo cuál dejará muchas dudas sobre la web. Al menos esa es mi opinión

[@GentlemanProgramming]

Hola ! Justamente eso es lo que explico, cuando el back responde satisfactoriamente actualizamos el front. Yo lo que digo es que no hay que esperar que el back responda en su respuesta con los datos modificados ya que nosotros fuimos quienes los enviamos ! Obviamente solo actualizamos el store al dar una respuesta satisfactoria, sino estaríamos introduciendo data incorrecta y así romperíamos con la lógica de un single source of truth, porque no estaríamos representando de manera cierta y confiable la realidad :). Este vídeo es solo de ejemplo muuuuy básico de cómo y cuándo utilizar cada uno. Gracias por tu comment !! 😄

[@GentlemanProgramming]

Fíjate el minuto 35:38 que explico justamente que hay que esperar :)

[@carlosmori6927]

Gentleman querido!! como andas? Tremendo video loco muchas gracias! Tuve la misma duda y me pregunto en este particular caso, si actualizamos el estado en redux con la futura respuesta del backend , pero al mismo tiempo la llamada al backend la hacemos usando el custom hook de async que cancela llamados en el unmount del component... Si navegamos a otra pagina , destruyendo el componente, pero actualizando el estado de redux. No tendriamos una inconsistencia en la arquitectura? Pregunto porque me encanta tu manera de pensar y me gustaria ver como lo encaras!

[@kevSDJ]

Cuando comencé a ver tus videos comprendí muchas cosas sobre react , gracias

[@GentlemanProgramming]

De nada Kevin !! Espero verte en alguno de mis directos :)

[@videloco84]

Hola, podrías regalarme acceso al repo para poder visualizarlo. Por ciento te encontré ayer no más y ya suscrito

[@GentlemanProgramming]

Gracias por tu subscribe !! Tengo que ver si lo tengo, déjame un tiempo y lo agrego. También lo informaré como un post así no te lo pierdes.

[@jeysonguzman7023]

el manejo de apis con redux tambien se puede?

[@GentlemanProgramming]

Solo para guardar estados ! Si quieres algo así tienes axios por ejemplo

[@GentlemanProgramming]

También podrías tener acciones que hagan las llamadas al back y guarden el valor en el estado

[@elmilitar143]

saludos estimado Gentleman , que videaso te felicito que bien explicas React se nota que le agarraste cariño a la libreria jaja, porfavor puedes pasar link del repo del proyecto

[@GentlemanProgramming]

Hola ! Justo no lo tengo a mano :( voy a tratar de replicarlo para que lo puedan tener

[@carlgm12]

Excelente explicacion !!

[@mariochavez2095]

Buen video Amigo !

[@AndresLobaton]

Buenisismo

[@franciscoalfaro7057]

Muy buen video!! No he utilizado redux o Context API aun pero suelo trabajar con Custom Hooks y me surgieron las siguientes dudas: 1.-¿Es recomendable utilizar redux como una especie de cache? (Para los tipicos select de provincias etc). 2.-¿Recomiendas utilizar redux junto a custom hooks? En mi caso los utilizo para llamar servicios de todo tipo(POST, GET, PUT, etc).

[@GentlemanProgramming]

fijate mi nuevo vídeo de redux vs context vs rxjs !!! justo explico todo eso: kzbin.info/www/bejne/i4TQXqifi96Hq7M

[@franciscoalfaro7057]

@@GentlemanProgramming Muchas gracias !! si me puse a ver varios de tus videos y ya me quedo mas claro todo eso. Excelentes videos . Saludos !!

[@agustincristobo9634]

Mil gracias, con tu explicación logre entender redux. Like y sub 🤙

[@GentlemanProgramming]

Vamoooooo, vas a ver que te va a servir !!

[@soldadopreciso]

35:39 Alli estoy tratando de entender que al final no usas el parametro user: User. Saludos sigue adelante. Buen trabajo.

[@fabiananavarro5556]

una duda, enseñaste redux vanilla o con toolkit incluido? no me quedo claro eso

[@GentlemanProgramming]

Redux toolkit !

[@fabiananavarro5556]

@@GentlemanProgrammingtendria que ver redux solo primero? vi este directo pensando que era el vanilla AJAJAJ

[@GentlemanProgramming]

@@fabiananavarro5556 tranqui ! Puedes ir directo a este, lo importante es entender el concepto ;)

[@fabiananavarro5556]

@@GentlemanProgramming gracias genio, tus video me ayudan mucho! Segui asi, vas muy bien 😁😁 encima la calma que transmitis es lo mejor, ayuda mucho a la ansiedad

[@GentlemanProgramming]

@@fabiananavarro5556 🥰🥰🥰🥰🥰

[@ivanreneccamamamani8624]

Sos un capo!

[@marcosvitaliable]

El video no trata sobre cuando usar Redux y cuando Context, sino que ningunea context diciendo que no sirve como estádo global y que la gente lo entiende mal, algo totalmente erróneo, Context sirve como estado global y hace innecesario Redux en la mayoría de los sistemas, obviamente no es solo Context sino también una buena arquitectura con una correcta organización de carpeta, buen uso de Custom Hooks, y una buena librería de manejo de forms como react-hook-forms. Lo mínimo que merece un ejemplo donde se recomienda Redux es no dar ejemplo de nombre, apellido, Id que es justo cuando no usar Redux. Además deberías saber que Redux usa context internamente, y si te tengo que dar una definición rápida de cuando no usarlo es muy simple, si estás usando redux solo para evitar pasar datos de padre a hijo no deberías usarlo. Te diría que Redux hoy aplica a poquísimos escenarios sin ser un boilerplate y no es lo que enseñas en este video. Te recomiendo leer el articulo de Dan Abramov "You Might Not Need Redux" donde verdaderame habla sobre los "trade off" de usar redux en el cual podras aprender que pasa mas por cosas como el debug, history, plugins, logs, etc lo cual puede justifica verdaderamente su uso. Claramente si veo este video me lleva que derberia usar Redux sobre Context Api la cual no sirve como estado global lo cual objetivamente esta mal, cuantos sistemas con los estados locales de los componentes y estados globales con context api son mas que suficiente. Pd te dejo un tweet de Dan Abramov para que ayudes a parar de esta bola de usar Redux solo por moda o por un estado global "I hope that with the new context API less people will use Redux because they need a global subscription mechanism, and more because they actually need Redux."

[@GentlemanProgramming]

Hola Marcos ! Gracias por tu mensaje !! No trato de decir que context no sirve para controlar estados globales o que redux es la solución a todo ! Sino que digo que la complejidad será mejor controlada según cada uno. Si al final estás utilizando un reducer que maneja acciones junto con context, entonces no es la solución adecuada ya que es justo lo que dice la documentación de React que no hay que hacer. Yo lo que propongo es utilizar Rxjs para manejo de eventos simples, context para manejos de información entre componentes de una misma vista y luego ya redux para información que puede ser pasada a través de toda la app, de manera que context no se nos transforme en un mounstro que es algo posible y más cuando recién empiezas. Muchas muchas gracias por el feedback !

[@codeConPedro]

Hola Marcos, estoy de acuerdo contigo... De hecho utilizar Redux + React Context puede afectar el rendimiento de una aplicación de React por que ambos ejecutan re-renders que no se pueden evitar ni si quiera utilizando useMemo, no lo recomendaría nunca. Sin embargo, tampoco creo que se deba atacar Redux y mucho menos dejar de utilizarlo, todo depende de la experiencia del equipo que manejes o del cual haces parte. Te doy un ejemplo sencillo... "No hay que reinventar la rueda", Redux es un manejador de estado que está testeado y documentado, si creas tu propio manejador de estado sin esta clase de mantenimiento con un equipo de poca experiencia (Juniors) posiblemente va a ser un dolor de cabeza tener que explicar como funciona lo que tu hiciste, ya que es una API sin estándares y generará un costo de aprendizaje para tu empresa lo que a su vez, costará dinero de esas horas invertidas de estudio... En este caso, es mejor implementar Redux. Si tu equipo cuenta con más experiencia es preferible utilizar React Context, únicamente porque reducirás la API a sus necesidades pero no porque ganes performance, lo que si perderás es un poco de tiempo haciendo tu propia implementación para ganar una arquitectura con menos dependencias de terceros... Sin embargo, tendrán una deuda técnica si no se hacen los tests y documentación correspondiente. Saludos a ambos!

[@matiassantiago4205]

Excelente performance como docente! muy buen canal. felicitaciones

[@GentlemanProgramming]

Gracias Matias !! ojalá te guste el resto de contenido :D

[@luichix.]

Muy buen video hermano... Muchas Gracias...

[@GentlemanProgramming]

De nada Luis ! Espero haber resuelto tus dudas :D

[@xakxa0178]

Exageradamente bien explicado muchas gracias :)

[@GentlemanProgramming]

Y de tu comentario estoy exageradamente agradecido :D

[@briansosa6948]

Muy buenos tus videos, Me podrias pasar la fuente y tema de VS?

[@GentlemanProgramming]

Yes ! Siempre uso Dracula y en cuanto a la font, jet beans mono o firacuda

[@baguilar6174]

Es un excelente canal... y muy buen contenido... tengo una pregunta, la aplicaciòn sobre la que estas trabajando la creas en algún otro video o tutorial?

[@GentlemanProgramming]

En próximos vídeos mister, lo prometo !

[@baguilar6174]

@@GentlemanProgramming muchas gracias crack sigue así

[@slaveofthecode]

Es la primera vez que un video tuyo y realmente muy bien explicado. Te ganaste un suscriptor mas 👏🏼👏🏼👏🏼

[@nahuelpalacios7443]

Muy buen video, qué theme usas?

[@GentlemanProgramming]

Hola Nahuel ! Dracula es mi tema preferido ! :D

[@JuanMartinRuiz]

Que opinas de Recoil? Va a terminar reemplazando Redux para React? Recomendas aplicarlo a un nuevo proyecto?

[@GentlemanProgramming]

Justo estaba hablando de eso entre mis pares el otro día ! Es una muy buena ideología pero hay un problema, como todo lo nuevo todavía no hay demasiado confianza como para aplicarlo a un project importante. Recomiendo usarlo para cosas pequeñas para irlo descubriendo hasta que se haga más maduro y se tenga mayor trust en el mismo.

[@JuanMartinRuiz]

@@GentlemanProgramming si por lo que veo ya viene muchos hooks copados y el concepto ese de atomos, claro todavia no llego a la version 1.0.0 gracias!!!

[@sb77727]

Excelente video hermano, impecable la explicación, rara vez puedo ver un video de youtube de mas de 40 minutos de programación solo por gusto y sin adelantarlo jaja, te hago una consulta, la forma de trabajar redux en este video es solo con redux toolkit no? Vengo de trabajar redux pero digamos de la forma rústica con switches, configurando thunk y utilizando un archivo de (tipos), en este caso funciona con la instalación sola de redux o es necesario el toolkit?

[@GentlemanProgramming]

Muchas gracias por además tomarte el tiempo para tan genial mensaje. En verdad yo siempre utilicé toolkit, ya que es por muchos (y por ellos mismos) como la herramienta oficial de usar Redux

[@sb77727]

@@GentlemanProgramming ahh genial tenia pendiente aprenderlo y lo hice en este video casi sin darme cuenta jeje, muchas gracias hermano!

[@GentlemanProgramming]

@@sb77727 de nadaaaaa 😇

[@GentlemanProgramming]

@@sb77727 yaaay aprendizaje indirecto, uno de mis favoritos Jajajaja

[@retorres9310]

Esta genial muchas felicidades tus videos son muy buenos, no había visto esa forma de crear reducers de un mismo store me pareció genial gran técnica y se puede ver súper escalable de esta forma, que piensas de agregarle inmutabilidad ? Sería aún más denso o complejo? Felicidades

[@GentlemanProgramming]

Hola ! Ya tiene inmutabilidad :D Cada método que recibe una acción retorna un valor nuevo que reemplaza al valor actual del state, si solo lo modificase, ningún componente sería notificado de cambio :)

[@retorres9310]

@@GentlemanProgramming súper si es verdad, mi error no había caído en cuenta de ese detalle

[@willymatheoo]

Buenísimo hermano 🤙🏾

[@GentlemanProgramming]

Con todo Mateo !

[@Luisito_Silva]

Excelente explicación!!!

[@GentlemanProgramming]

Gracias Luis !!!!! 🤩

[@Luciano_ib]

Muy buen video Alan!

[@GentlemanProgramming]

Muchas gracias Luciano !!!

[@serdna1988]

Excelente video, un lujo de detalle y super claro, gracias!!

[@_josuealonso]

Pregunta, cuando yo haga una modificacion a un estado en redux, se vuelve a renderizar todo lo que estaba en el Provider cierto?

[@GentlemanProgramming]

Si pero con una acotación, Redux es muy inteligente y solo se va a re-renderizar aquellos componentes cuya información necesaria cambie. Por ejemplo: aquellos que utilicen del estado que ha cambiado para mostrar algo en pantalla.

[@matiasromera330]

@@GentlemanProgramming gracias por la respuesta, tenía al misma duda, entonces es como si los componentes estuvieran memorizados

[@GentlemanProgramming]

@@matiasromera330 yes ! Es parte de lo que se llama virtual dom, ya vamos a llegar a ese contenido !

[@matiasromera330]

@@GentlemanProgramming se nota que hay ansiedad en tu comunidad ah? Jaja che aprovecho para decirte que de éste vídeo me puse a ver tus videos anteriores y son todos de muy buena calidad, se aprecia mucho tu calidad de oratoria y ese modo "gentleman" de ser profesional

[@GentlemanProgramming]

@@matiasromera330 muuuchas gracias mister ! Es un placer tener gente que quiere aprender con todas las ganas !!

[@juancruzledesma5693]

Consulta, ando queriendo aprender Redux pero vi que utilizan Redux con Toolkit, Redux con Nucks, Redux con Sagas o incluso un React Query como reemplazante de Redux... ¿Que recomendacion me podrías dar al respecto? Desde ya, muchas gracias!!

[@juancruzledesma5693]

Pd: Estoy más perdido que soldado en guerra je

[@GentlemanProgramming]

Lo que yo te recomiendo es que le des a Redux Toolkit es la forma oficial de trabajar con la librería. Trata de empezar con algo simple como en el vídeo y ve de apoco, que NADIE ni NADA te apure en tu forma de aprender. El tiempo y el esfuerzo son los únicos que te van a ayudar

[@GentlemanProgramming]

Pd: te espero en el discord ! Así te podemos dar una mano más grande :D

[@juancruzledesma5693]

@@GentlemanProgramming Yendo!!

[@juancruzledesma5693]

@@GentlemanProgramming No me estaria aceptando el enlace que esta en la descripcion

[@maxchoquemartinez6126]

muy buen video, para agregar yo vi una practica en la cual usaba la convinacion de context, reducer y flux, no se si todabia lo usan actualmente pero a mi me gusto por que igual es de facil comprensión.

[@GentlemanProgramming]

Yes ! la utilización del reducer es cuando tienes que manejar asignaciones al estado que son más complejas, todavía se hace ! :D