Nextjs Redux Toolkit y Typescript - Ejemplo Practico desde cero

Aprende a integrar Redux Toolkit en Nextjs (usando la carpeta app o app directory) además de usar Typescript, este es un ejemplo desde cero pero aun así se necesita que el desarrollador ya sepa conceptos como React, API Context, y bases de Nextjs, ya que el video se enfoca mas en como configurarlo y usarlo en aplicaciones, además también usaremos sus métodos para pedir datos usando fetch por debajo, y estableciéndolo en su estado, aunque esto lo hace por defecto Redux Toolkit.
Codigo del Ejemplo:
github.com/faz...
⭐ Cursos Recomendados
Curso de React ⮕ • Curso de Reactjs desde...
Curso de Javascript para React ⮕ • Javascript para Aprend...
🗣 Redes Sociales
⮕ Twitter / fazttech
🎒 Servicios Recomendados
DigitalOcean ⮕ m.do.co/c/8ef2...
Namecheap ⮕ namecheap.pxf....
Ledger ⮕ (Hardware Wallet) bit.ly/3ijsVNW
SiteGround ⮕ bit.ly/31u9ZEk
Cloudinary ⮕ bit.ly/3ohNlJ7
🌎 Sitio Web
fazt.dev
#reduxtoolkit #reduxjs #nextjs #reactjs

[@TheMentor03]

Excelente! Cuando hablas sobre un tema, lo cubres desde 0 hasta lo más detallado de forma precisa. ♣

[@Biocrista]

diosmio me encanta como cuando necesito ver como combinar algo especifico, tu te adelantaste y ya lo subiste. Siempre me sacas las patas de el barro xD

[@DANIBON100]

¡Gracias!

[@FaztCode]

Gracias a ti también Dani

[@solanaromero2085]

Gracias Fazt!!!! hace semanas que vengo teniendo problemas para incluir el provider dentro del layout porque me tiraba el error del use client y gracias a este tutorial me anda. Me ahorraste días de debuggeo. GRACIAS GRACIAS GRACIAS!!!!!!

[@Khris14]

que bueno que sos fatz, te dedico mi codigo todas las noches

[@FaztCode]

pero que buen comentario jajaja

[@Mitdevcat]

definitivamentye el mejor ejemplo para aprenderlo y aplicarlo, casi como un boilerplate, al principio no le encontraba la gracia a complicar tanto el estado pudiendo usar otros metodos mas simples como local state, pero ahora quiero usar redux en todo no ironicamente

[@Deus-lo-Vuilt]

Gracias por el video fazt , súper interesante 🙌🙌 , se agradece el material de Next

[@leoodriozola275]

Al final salió el proyecto más completo que dijo al final? este man es muy teso, me quede con ganas de aprendar más

[@miguelviloria4596]

Gran explicación, muchas gracias, que bueno ver estos tutoriales con typescrit

[@hernanarroyo2956]

Gracias por el video Fazt querido. Mientras más Redux veo, más amo Zustand + React-Query 👀

[@ZBROOS]

definitivamente increible!! muchas gracias fazt!! :))

[@SonGoku-pc7jl]

Muchas gracias Fazt, redux aunque sea con toolkit siempre me cuesta un poco y hoy más en las dos linias de typeof que se han necesitado por estar con typescript. Pero la clase ha sido genial igualmente :) muchisimas gracias! :D Aunque zustand me enamora más jeje :)

[@jairoandresvizuetepedraza5492]

Muchas gracias por tu contribución 🎉🎉

[@tanometro]

Muchas gracias viejo, zarpados tutoriales

[@Artison14]

Gracias por el tutorial hermano, sigue así!!

[@andres-mora-vanegas]

Hola Fazt, felicidades por el video muy claro, si necesitará por ejemplo desde el api guardar la información en el estado como de debería hacer, crear una función que guarde los datos una vez consultados?

[@favenegas6396]

Manifestando un curso de java con spring 😅 Gracias por tu videos

[@richardramirez5746]

Hola Fazt. Muchas gracias por tus tutoriales. Quisiera preguntarte una cosa: estas usando Providers con 'use client' para que esto 'corra en el client' como dice NextJS. Pero veo que lo estas utilizando para proveer el estado de Redux a toda la aplicacion, es decir, a todas las paginas que pudieran crearse. La gente de NextJS dice que usando la directiva cliente en un componente como Providers hace que todos los hijos de este asuman esa directiva (que en tu ejemplo serian todas las paginas, minuto 22), pero ellos ademas recomiendan enviar el menor Javascript posible al cliente. Como lo haces en el tutorial, no estarias haciendo que todas las paginas se envien como JS al cliente? No habia visto como usar Redux con NextJS, pero habia pensado en que de pronto el Providers se usara donde se necesitara, siguiendo la linea de poner 'use cliente' lo mas bajo posible en el arbol de componentes. Que me podrias decir?

[@hal_emmerich]

Estas en lo correcto amigo. Creo que en este video Fazt está desperdiciando todo el potencial de esta nueva versión de Next.js y no muestra realmente las ventajas de usar este metaframework en comparación de cualquier otro framework.

[@alanfabianherrera5874]

si uilizar use client le indica a next que el componante se renderiza en el cliente, y pues las ventajas de renderizado en el servidor se pierde

[@emanuelmejia4525]

Hola, yo tambien tengo esa duda, al usar el 'use client' en el provider hace que todas las demas paginas comportan el mismo comportamiento, no? de que otra forma pudiera hacerlo?

[@richardramirez5746]

@@alanfabianherrera5874 De hecho "use client" hace que renderice en servidor y luego rehidrate en el cliente.

[@UCfMdFmDn3gpA4O1MQnj]

Buenas! Te comparto la respuesta de un usuario de la plataforma. Parece ser que por mas que tenga el 'use client', en este contexto, no obliga a todos los componentes a ser Client Components. "For those left with the question: "Isn't this messing up the whole SSR thing" or "Now that there is a client component wrapping the entire application, isn't it forcing all components to act as client components", read along. This is not actually the case, server components are only handled as client components when they are directly imported and rendered in a client component (that has 'use client'). In this implementation they are not actually imported, but received as children. When you do this, the `{ children }` acts as a "hole", it's not rendered there but in the parent component and then passed (as children) to "fill the hole". This is a bit confusing but is in the docs, look for "Nesting Server Components inside Client Components" in the "React Essentials" section. You can confirm this pretty easily, follow the video and wrap the layout children in the Redux provider. Now, leave the page.tsx file as a server component (no 'use client') and add a console.log to it. Notice that the log only happens in the server, not in the browser console, this is because the component is still handled by the framework as a server component. Or you can just install and add the "server only" directive at the top of page.tsx and confirm that you are not getting any errors ¯\_(ツ)_/¯. Also, you don't have to add "use client" in every redux file, only in the provider. Fun fact: Next.js is already using redux under the hood, if you have the Redux DevTools extension installed you can find a next-router store" @GabrielGasp

[@JhoEspana]

esta es la forma correcta para consumir Apis con Redux toolkit o también se puede usar createAsyncThunk??

[@AlejandroRL868]

Bro, unos de protección de rutas (middleware) con roles y permisos, un saludo desde cuba

[@joaquinbustelo7889]

Te amo Fazt

[@fesmpydev]

Hola Fazt, la unica pregunta que tengo es, El Providers al poseer 'use client' y como este esta envolviendo todos los componentes hijos, todo nuestra app se renderizara del lado del cliente ?

[@emanuelzarazaga3581]

Muchas gracias por la explicación. Muy buen vídeo como ya nos tienes acostumbrado. Me gustaría saber sino conviene utilizar createWrapper de la biblioteca next-redux-wrapper para un proyecto de NextJS. Saludos

[@felipemireles8422]

gracias, explicado muy bien!

[@geolvz]

Si no estas familiarizado con Redux Toolkit, en este video manejan Redux Toolkit Query RTQ. Abstracciones más avanzadas para manejo de API. Solo como advertencia. Especialmente usando TS puede ser algo confuso para los que van iniciando o apenas conocen Redux.

[@diegoguanuco6846]

Gracias gracias gracias

[@xO_ADX_Ox]

Un video con el T3 Stack (mysql)

[@juanpo8457]

que tema tenes?

[@sergiocanomartinez5320]

Lo mismo seria para nextjs 12?

[@FaztCode]

casi, solo que en lugar de añadir el context en layout.tsx lo añades en pages/_app.tsx

[@sergiocanomartinez5320]

@@FaztCode muchas gracias, hoy tomé el de Nextjs+Mysql, ahora a meterle Redux

[@rapa99YT]

muchas gracias fazt, toda esa configuracion previa es estandar?

[@FaztCode]

Si básicamente siempre se añaden esos archivos con esos typings

[@rapa99YT]

@@FaztCode muchas gracias, se trabaja más cómodo y de manera estructurada.

[@abelmurua6980]

Perfecto

[@brexing]

Grande fazt ❤. Por tomarte el tiempo para compartir tus conocimientos. Una pregunta fuera del tema y me gustaría recibir sugerencia ¿como se protegen la vista cuando trabajan mucho timepo en frente de la pantalla?

[@alejandrobravo1221]

Tutorial para personalizar la powershell asi porfavor!

[@FaztCode]

hace tiempo hice una :) kzbin.info/www/bejne/mmrcYZ9trr5nZpY

[@josuerojasparedes1862]

fazt duda que es ese visual de color verde es un nuevo editor ?

[@FaztCode]

gracias por la idea josue para este video :) kzbin.infoDWQvSm4MZJQ?feature=share

[@Holri]

Master 🥵

[@thephalcon]

Hello sir please bring nextjs latest course full basic to advance

[@luiscarlosdelorenzicantero7379]

😂usar redux no es lo mismo que usar contexAPI y useReducer en react??? Alguien que me ayude

[@danielrangel2623]

Que peo!! pa un simple contador con redux, deberias usar pinia + vue, react da es pena ajena, cada ves esta peor, en ves de hacer las cosas mas faciles las pone mas engorrosas para usar un store.

[@stevenalvarado101]

Andá pa shá

[@joaquinbustelo7889]

@@stevenalvarado101 ci

[@edixonpina2755]

Calma!, esto es un simple ejemplo sin justificacion para mostrar la utilidad, cuando lo usas en proyectos reales para manejar grandes logicas de negocio bajo una gran cantidad de componentes es donde se puede justificar tanta implementacion... Pero si Vue es mejor que React, eso nadie lo discute, pero el video acá no va de eso. Saludos.

[@danielrangel2623]

@@edixonpina2755 A mi solo me molesta que todo es react, acaso no ven que vue es más fácil y rápido de implementar ?? Fast no usa vue nunca, no entiendo que le ven a react solo por qué sea sustentada por facebook no significa nada.

[@edixonpina2755]

@@danielrangel2623 El cochino dinero supongo