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

Поделиться
HTML-код
  • Опубликовано: 14 дек 2024

Комментарии • 119

  • @enmimaquinaandaba
    @enmimaquinaandaba Год назад +10

    ¡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
      @GentlemanProgramming  Год назад +3

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

  • @riut49
    @riut49 9 месяцев назад +4

    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.

  • @OPlutarch
    @OPlutarch 2 года назад +11

    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
      @GentlemanProgramming  2 года назад

      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
    @SimaDamian 2 года назад +2

    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
      @GentlemanProgramming  2 года назад

      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

  • @rauljcamacho
    @rauljcamacho 3 года назад +2

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

  • @kevSDJ
    @kevSDJ 2 года назад +2

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

  • @Brunato77
    @Brunato77 2 года назад +1

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

  • @matiassantiago4205
    @matiassantiago4205 2 года назад +1

    Excelente performance como docente! muy buen canal. felicitaciones

  • @d-landjs
    @d-landjs 5 месяцев назад +1

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

  • @soldadopreciso
    @soldadopreciso Год назад

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

  • @matiasromera330
    @matiasromera330 2 года назад +2

    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
      @juancruzledesma5693 2 года назад +3

      Vos sabes que justo en eso pensaba

    • @GentlemanProgramming
      @GentlemanProgramming  2 года назад

      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 😇

  • @slaveofthecode
    @slaveofthecode Год назад

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

  • @agustincristobo9634
    @agustincristobo9634 2 года назад +1

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

  • @nemines001
    @nemines001 Год назад +1

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

  • @gonzalobuasso1421
    @gonzalobuasso1421 2 года назад +1

    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
      @GentlemanProgramming  2 года назад

      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 🤓

  • @maxchoquemartinez6126
    @maxchoquemartinez6126 2 года назад

    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
      @GentlemanProgramming  2 года назад

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

  • @luichix.
    @luichix. 2 года назад +1

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

  • @serdna1988
    @serdna1988 2 года назад

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

  • @franciscoalfaro7057
    @franciscoalfaro7057 2 года назад +1

    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
      @GentlemanProgramming  2 года назад +1

      fijate mi nuevo vídeo de redux vs context vs rxjs !!! justo explico todo eso: ruclips.net/video/USm-uiVyTuQ/видео.html

    • @franciscoalfaro7057
      @franciscoalfaro7057 2 года назад

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

  • @eduprojects3187
    @eduprojects3187 3 года назад +1

    Gracias tio Luigui ...buen video ; )

  • @xakxa0178
    @xakxa0178 2 года назад +1

    Exageradamente bien explicado muchas gracias :)

  • @nahuelpalacios7443
    @nahuelpalacios7443 2 года назад +1

    Muy buen video, qué theme usas?

  • @sb77727
    @sb77727 2 года назад +1

    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
      @GentlemanProgramming  2 года назад +1

      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
      @sb77727 2 года назад +1

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

    • @GentlemanProgramming
      @GentlemanProgramming  2 года назад +1

      @@sb77727 de nadaaaaa 😇

    • @GentlemanProgramming
      @GentlemanProgramming  2 года назад +1

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

  • @fabiananavarro5556
    @fabiananavarro5556 2 года назад +1

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

    • @GentlemanProgramming
      @GentlemanProgramming  2 года назад +1

      Redux toolkit !

    • @fabiananavarro5556
      @fabiananavarro5556 2 года назад +1

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

    • @GentlemanProgramming
      @GentlemanProgramming  2 года назад +1

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

    • @fabiananavarro5556
      @fabiananavarro5556 2 года назад +1

      @@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
      @GentlemanProgramming  2 года назад +1

      @@fabiananavarro5556 🥰🥰🥰🥰🥰

  • @baguilar6174
    @baguilar6174 2 года назад +1

    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
      @GentlemanProgramming  2 года назад +1

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

    • @baguilar6174
      @baguilar6174 2 года назад

      @@GentlemanProgramming muchas gracias crack sigue así

  • @jeysonguzman7023
    @jeysonguzman7023 Год назад +1

    el manejo de apis con redux tambien se puede?

    • @GentlemanProgramming
      @GentlemanProgramming  Год назад +1

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

    • @GentlemanProgramming
      @GentlemanProgramming  Год назад +1

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

  • @Luciano_ib
    @Luciano_ib 3 года назад +1

    Muy buen video Alan!

  • @nicolasdebiaggi776
    @nicolasdebiaggi776 2 года назад +3

    tenes un link al repo para verlo en mas detalle?

    • @GentlemanProgramming
      @GentlemanProgramming  2 года назад +2

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

  • @mariochavez2095
    @mariochavez2095 Год назад +1

    Buen video Amigo !

  • @retorres9310
    @retorres9310 3 года назад +1

    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
      @GentlemanProgramming  3 года назад +1

      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
      @retorres9310 3 года назад

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

  • @flaviobravosantos9723
    @flaviobravosantos9723 Год назад +1

    hay repo de este ejemplo?

    • @GentlemanProgramming
      @GentlemanProgramming  Год назад +1

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

  • @hectorb.calles5943
    @hectorb.calles5943 6 месяцев назад +1

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

  • @willymatheoo
    @willymatheoo 2 года назад +1

    Buenísimo hermano 🤙🏾

  • @Broly94
    @Broly94 Год назад +1

    Es redux toolkit lo que usas?

  • @Luisito_Silva
    @Luisito_Silva 2 года назад +1

    Excelente explicación!!!

  • @angelfigueroa6662
    @angelfigueroa6662 2 года назад +1

    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

  • @elmilitar143
    @elmilitar143 2 года назад +1

    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
      @GentlemanProgramming  2 года назад +1

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

  • @carlgm12
    @carlgm12 2 года назад +1

    Excelente explicacion !!

  • @AGriffith
    @AGriffith 2 года назад +2

    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
      @GentlemanProgramming  2 года назад +2

      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
      @GentlemanProgramming  2 года назад +1

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

    • @carlosmori6927
      @carlosmori6927 2 года назад

      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!

  • @JuanMartinRuiz
    @JuanMartinRuiz 3 года назад +1

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

    • @GentlemanProgramming
      @GentlemanProgramming  3 года назад

      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
      @JuanMartinRuiz 3 года назад +1

      @@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!!!

  • @_josuealonso
    @_josuealonso 3 года назад +1

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

    • @GentlemanProgramming
      @GentlemanProgramming  3 года назад +3

      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
      @matiasromera330 2 года назад +1

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

    • @GentlemanProgramming
      @GentlemanProgramming  2 года назад +1

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

    • @matiasromera330
      @matiasromera330 2 года назад +1

      @@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
      @GentlemanProgramming  2 года назад +1

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

  • @juancruzledesma5693
    @juancruzledesma5693 2 года назад +1

    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
      @juancruzledesma5693 2 года назад +1

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

    • @GentlemanProgramming
      @GentlemanProgramming  2 года назад +1

      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
      @GentlemanProgramming  2 года назад +1

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

    • @juancruzledesma5693
      @juancruzledesma5693 2 года назад +1

      @@GentlemanProgramming Yendo!!

    • @juancruzledesma5693
      @juancruzledesma5693 2 года назад +1

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

  • @alexanderortiz2820
    @alexanderortiz2820 2 года назад +1

    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

  • @ivanreneccamamamani8624
    @ivanreneccamamamani8624 7 месяцев назад

    Sos un capo!

  • @williamdevjs9974
    @williamdevjs9974 2 года назад +1

    my buen video y el github de ese codigo

  • @briansosa6948
    @briansosa6948 2 года назад +1

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

    • @GentlemanProgramming
      @GentlemanProgramming  2 года назад +2

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

  • @AndresLobaton
    @AndresLobaton 2 года назад

    Buenisismo

  • @videloco84
    @videloco84 2 года назад +1

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

    • @GentlemanProgramming
      @GentlemanProgramming  2 года назад +2

      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.

  • @marcosvitaliable
    @marcosvitaliable 2 года назад +3

    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
      @GentlemanProgramming  2 года назад

      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
      @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!