Para los que vean el tutorial ahora, en el MIDDLEWARE: tomar en cuenta que en minuto 1.03.00 que habla de middleware si están trabajando con la versión 2 o superior de redux toolkid la forma de definir el middleware ha cambiado. Ahora se lo hace así: middleware: (getDefaultMiddleware) => { return getDefaultMiddleware().concat(persistanceLocalStorageMiddleware) },
Locura como estoy evolucionando se nota muchisimo la diferencia, estoy yendo proyecto a proyecto y que pasada, he pasado de 'copiar y medio entender' a adelantarme a ti en muchas cosas y luego ver como lo haces y corregir o incluso ver que lo haces igual. Mil gracias midu, sin sentido todo lo que estoy aprendiendo contigo
Para los que vean el tutorial ahora, rome-tool está deprecada, ahora se llama biome. Pero no la recomiendo personalmente porque tiene algunos problemas de optimización, como los que le pasó a Midu en el video.
Para los que tengan problemas con el middleware, como fue mi caso, el código que he utilizado es el siguiente: export const store = configureStore({ reducer: { saved: savedReducer, operations: operationsReducer }, middleware: (getDefaultMiddleware) => { return getDefaultMiddleware().concat(persistanceLocalStorageMiddleware, anotherMiddleware) } }) El la única manera que he conseguido que funcione y poder añadir más middleware si fuera necesario, separados por comas como en el ejemplo que puse.
Ps es lo mismo solo hay que agregar el tipado jajajja también tu quieres que te hagan todo! Hay que usar el ingenio mi buen! Eso va a ayudar mucho a la vida laboral
Midu pero la los thunks ayudan mucho a la inyección de dependencia. Creo que es cuestion mas de gusto que otra cosa jejej :D Pero no hay que negar que eres un crack y siempre se te aprende algo nuevo eso es lo que importa, depende de nosotros usar nuestra criterio e ir sumando perspectivas a través de los recursos que hay en internet, especialmente en el tuyo.
Grande Midu! Gracias por tus aportes! Sería buena idea utilizar una estrategia como throttle al crear un middleware? Para evitar estar guardando en cada acción que vaya al reductor.
Cuando guardo no funciona ni el formatOnSave, ni tampoco el fixAll.rome, se me queda así: *Saving 'App.tsx': Running 'Rome' Formatter (configure).* Después, si intento cerrar y volver a abrir el vsCode, no puede inicializarse Rome por lo que tengo que reiniciar la PC y vuelvo al principio
dice 'boilerplate' que se puede traducir como 'plantilla'
Рік тому+2
Hola Midu gracias por tus videos siempre buscando enseñar las mejores practicas... Quisiera que en algun momento des tu recomendación bajo tu experiencia, de persistencia de datos de sesion de la store. He utilizado localstorage, sesionstorage en el navegador pero he tenido problemas de seguridad por manejar datos del lado del cliente (inclusive encriptandola), existe una mejor alternativa? he leido sobre redux-persist
Excelente maestro, muchas gracias ... porfavor si puedes hacer un video de Qwik, estoy armando un ecommerce que referencie la venta a whatsap pero tengo complicaciones 😥, en fin , muchas gracias por compartir un material increible
Gran explicación. A grandes rasgos, que beneficios tiene comunicarse con la db como lo has hecho (middleware) y no mediante thunks (usando métodos como createAsynThunk y especificar estados en los extraReducers)?
me queda una duda con la estructura del middleware, en este caso se creo un middleware en el store para la creacion y eliminacion de usuarios, en el caso de una aplicacion grande y en el caso de tener muchos middleware, se apilan todas esas llamadas en dentro del store al igual que persistanceLocalStorageMiddleware y syncWithDatabaseMiddleware, o hay alguna manera de no apilar una cantidad grande de middlewares en el store?
Consulta. No he encontrado en UA-cam ejemplo de Redux Toolkit y React Query. Entiendo que los 2 pueden convivir, verdad ? Y al momento de traerme la data con React Query, luego la almaceno con Redux. Estaría bien eso?
Muy bueno tu tutorial, Pero pregunto si ya ni Dan Abramov recomienda usar Redux a estas alturas, ya que hay herramientas que podrían funcionar mejor, como React Context o React Query o SWR o muchas otras? porque lo recomendarías?
El no lo esta recomendando, esta enseñando a usarlo porque todo el mundo siempre le dice que para cuando enseña redux, aunque ni su creador Dan quiere Redux, hay codigo afuera que se maneja con redux, mas del 70% me atreveria a decir
Algo que me resulta confuso es el hecho de que las actions se agregan dentro del createSlice en reducers: { deleteUserById }, no sé si la confusión viene de que se exporta como { deleteUserById } = usersSlice.actions. Si alguien me puede quitar la duda, se lo agradezco
En la parte del middleware en caso de tener varios slices/reducers guardarlo de esa manera en el localStorage guardaría todos los estados, en caso de querer guardar solo 2 o 3 estados no se me ocurre otra manera que manipular directamente el localStorage desde los reducers en los que es necesario o cómo seria posible, estoy usando Next 13, a la hora de leerlo no he visto problema, lo pude hacer como en el video sin usar useEffect
UPDATE: Al final simplemente en el setItem del localStorage en vez de pasar todos los estados pase un objeto con solo los 2 estados que necesitaba en localStorage, algo asi: const persistanceLocalStorageMiddleware = (store) => (next) => (action) => { next(action) localStorage.setItem("__redux__state__", JSON.stringify({ pendingBooks: store.getState()["pendingBooks"], finishedBooks: store.getState()["finishedBooks"] })) }
Hola @midudev por que le pones usersReducer cuando lo importas en el store? le podes poner cualquier nombre al importar y lo toma igual? por que si te vas al slice.ts no aparece ese nombre es raro eso.. podes explicarlo? Gracias
es porque al no importar nada usando las { } lo que importas del documento es lo que hay en el 'export default...' por eso al final del doc pone el export default, pero vamos que esta pregunta misma, se la haces a chat gpt y te responde explicandote mejor que que cualquiera en un comnetario de yt LOL
Esperen elmidleware es global no? osea si trabajo con otros reducers como postReducer, el cambio en el estado de este tambien entrara a ese midleware entonces no lo veo viable persistir en los midlewares, la unica solución que encontré de persistir la data sin acoplarla a redux es con el useEffect aplicado al estado de los usuarios, si alguien sabe como manegar de una mejor manera diganla porfa.
¡Hola!, alguien sabe por qué los estilos de Tremor podrían llegar a fallar? (hice lo mismo que el video, pero no funcionan) lo raro es que los estilos de tailwind si van, pero en los componentes no.
@@midulive Hola midu!, gracias por responder. En el archivo tailwind.config.ts tengo: /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", // Path to the Tremor module "./node_modules/@tremor/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], } y en el index.ccs: @tailwind base; @tailwind components; @tailwind utilities; No sé si a eso te refieres.
Gracias midu, aunque sí creo que deberías explicar un poco más las cosas que están implementando, qué hace y cómo funciona, porque siento que me he perdido mucho en este video la verdad, salí con más preguntas que respuestas :/
pnpm es más rápido, además usa un almacenamiento centralizado, de esa forma no se instalan una y otra vez los paquetes sino que tienes vínculos a dónde estos se encuentran.
Para los que vean el tutorial ahora, en el MIDDLEWARE: tomar en cuenta que en minuto 1.03.00 que habla de middleware si están trabajando con la versión 2 o superior de redux toolkid la forma de definir el middleware ha cambiado. Ahora se lo hace así:
middleware: (getDefaultMiddleware) => {
return getDefaultMiddleware().concat(persistanceLocalStorageMiddleware)
},
Gracias, estaba atorado con eso y me haz ayudado un montón.
Gracias! 👍🏻👍🏻
Oye muchisimas gracias. gracias. gracias graciassssssss
update: Ahora tambien se hace de la siguiente manera: " middleware: () => new Tuple(persistanceMiddleware) " según la documentación
Eres un herore bro
Locura como estoy evolucionando se nota muchisimo la diferencia, estoy yendo proyecto a proyecto y que pasada, he pasado de 'copiar y medio entender' a adelantarme a ti en muchas cosas y luego ver como lo haces y corregir o incluso ver que lo haces igual.
Mil gracias midu, sin sentido todo lo que estoy aprendiendo contigo
empeze a las 9am y lo termino a las 7 y me funciono todo :) , te ganaste el cielo midu
Esooooo, qué genial! Gracias!🤗
Fantástico Midu! el mejor video de Redux, toolkit, hooks, middleware, etc etc etc! muchas gracias !!!!!!!!!!!!!
Gracias!
Yo quedo sorprendido con todo lo que este hombre sabe y encima con el deseo de enseñarlo
Para los que vean el tutorial ahora, rome-tool está deprecada, ahora se llama biome. Pero no la recomiendo personalmente porque tiene algunos problemas de optimización, como los que le pasó a Midu en el video.
Que recomendarías para ello
@@armandodev_ el confiable eslint + prettier.
real no entendia porque no funcionaba jaja
Yo directamente he optado por no añadirla. Si tienes prettier y eslint ya va bien y es solo para el formateo y te muestre los errores.
Increible, cada video que subes me hace pensar en lo hermoso que es tenerte, muchas gracias por tu hermoso y genial contenido!
me agrada cuando dice, que no es bueno que estemos viendo cosas desde cero, y nos enseñas algo avanzado, eres el mejor MIDU :3
Me ayudo un montonazo este curso... como muchos otros q has hecho midu... Un saludo grande desde Argentina....
Contenido de calidad, grande Midu :D
gracias por tanto midu gracias a ti he aprendido react de una manera divertida y llena de conocimiento
Cada día aprendo nuevas herramientas gracias a ti, gracias por llenarnos de tus conocimientos, larga vida al rey 😎😎
Para los que tengan problemas con el middleware, como fue mi caso, el código que he utilizado es el siguiente:
export const store = configureStore({
reducer: {
saved: savedReducer,
operations: operationsReducer
},
middleware: (getDefaultMiddleware) => {
return getDefaultMiddleware().concat(persistanceLocalStorageMiddleware, anotherMiddleware)
}
})
El la única manera que he conseguido que funcione y poder añadir más middleware si fuera necesario, separados por comas como en el ejemplo que puse.
Gracias, estaba atorado con eso y me haz ayudado un montón.
nada como tomar un curso del midu a las once de la noche ;)
Hola midu Gracias por tu trabajo y dedicación aun falta la tercera parte de Typescript
Ps es lo mismo solo hay que agregar el tipado jajajja también tu quieres que te hagan todo! Hay que usar el ingenio mi buen! Eso va a ayudar mucho a la vida laboral
Sin desperdicios 🔥🔥
MiduGod explicando cómo realizar la capa extra para el día de mañana no depender de react-redux 🎉
geniales tus clases!
Joyita, el tipado usando custom hooks me volo el cerebro 🤯🤯🤯
Midu pero la los thunks ayudan mucho a la inyección de dependencia. Creo que es cuestion mas de gusto que otra cosa jejej :D Pero no hay que negar que eres un crack y siempre se te aprende algo nuevo eso es lo que importa, depende de nosotros usar nuestra criterio e ir sumando perspectivas a través de los recursos que hay en internet, especialmente en el tuyo.
Gracias por los videos, pero creo q no mencionaste como manejar la asincronía, sin usar los thunks? min 3:49
Qué grande Midu!!!!
Grande Midu! Gracias por tus aportes!
Sería buena idea utilizar una estrategia como throttle al crear un middleware?
Para evitar estar guardando en cada acción que vaya al reductor.
Cuando guardo no funciona ni el formatOnSave, ni tampoco el fixAll.rome, se me queda así: *Saving 'App.tsx': Running 'Rome' Formatter (configure).*
Después, si intento cerrar y volver a abrir el vsCode, no puede inicializarse Rome por lo que tengo que reiniciar la PC y vuelvo al principio
Hermoso ❤❤❤
Hola, saludos. Disculpa midu en el min 50:12 hablas de un termino llamado ball airplay (juego areo de la pelota?). Que significa disculpa
dice 'boilerplate' que se puede traducir como 'plantilla'
Hola Midu gracias por tus videos siempre buscando enseñar las mejores practicas... Quisiera que en algun momento des tu recomendación bajo tu experiencia, de persistencia de datos de sesion de la store. He utilizado localstorage, sesionstorage en el navegador pero he tenido problemas de seguridad por manejar datos del lado del cliente (inclusive encriptandola), existe una mejor alternativa? he leido sobre redux-persist
Por favor Midu, un pequeño video de manejo de formularios en sitios SSG.
Excelente maestro, muchas gracias ... porfavor si puedes hacer un video de Qwik, estoy armando un ecommerce que referencie la venta a whatsap pero tengo complicaciones 😥, en fin , muchas gracias por compartir un material increible
Midu sos un crack!
Gran explicación.
A grandes rasgos, que beneficios tiene comunicarse con la db como lo has hecho (middleware) y no mediante thunks (usando métodos como createAsynThunk y especificar estados en los extraReducers)?
En el minuto 28:45, no es mismo que un context??
me queda una duda con la estructura del middleware, en este caso se creo un middleware en el store para la creacion y eliminacion de usuarios, en el caso de una aplicacion grande y en el caso de tener muchos middleware, se apilan todas esas llamadas en dentro del store al igual que persistanceLocalStorageMiddleware y syncWithDatabaseMiddleware, o hay alguna manera de no apilar una cantidad grande de middlewares en el store?
gracias por elevarme el ki en programacion
Kame Hame Haaaa
@@midulive 🤣 🤣 🤣
Hermosa esta clase! Es posible usar middlewares asi con useContext?
Consulta. No he encontrado en UA-cam ejemplo de Redux Toolkit y React Query.
Entiendo que los 2 pueden convivir, verdad ?
Y al momento de traerme la data con React Query, luego la almaceno con Redux.
Estaría bien eso?
Video descargado 😁
Muy bueno tu tutorial, Pero pregunto si ya ni Dan Abramov recomienda usar Redux a estas alturas, ya que hay herramientas que podrían funcionar mejor, como React Context o React Query o SWR o muchas otras? porque lo recomendarías?
El no lo esta recomendando, esta enseñando a usarlo porque todo el mundo siempre le dice que para cuando enseña redux, aunque ni su creador Dan quiere Redux, hay codigo afuera que se maneja con redux, mas del 70% me atreveria a decir
@@AR7editing Ok ok 😄 si es que ese twitch no lo vi... 😢
Hola Midu, estaba leyendo y parece que ROME acabó mal, el repo esta archivado el 1 de septiembre lanzaron por twitter un comunicado
Jajajajaja pues en el server, JAJAJAJAJAJ detallazo 1:51:02
Algo que me resulta confuso es el hecho de que las actions se agregan dentro del createSlice en reducers: { deleteUserById }, no sé si la confusión viene de que se exporta como { deleteUserById } = usersSlice.actions. Si alguien me puede quitar la duda, se lo agradezco
En la parte del middleware en caso de tener varios slices/reducers guardarlo de esa manera en el localStorage guardaría todos los estados, en caso de querer guardar solo 2 o 3 estados no se me ocurre otra manera que manipular directamente el localStorage desde los reducers en los que es necesario o cómo seria posible, estoy usando Next 13, a la hora de leerlo no he visto problema, lo pude hacer como en el video sin usar useEffect
UPDATE:
Al final simplemente en el setItem del localStorage en vez de pasar todos los estados pase un objeto con solo los 2 estados que necesitaba en localStorage, algo asi:
const persistanceLocalStorageMiddleware = (store) => (next) => (action) => {
next(action)
localStorage.setItem("__redux__state__",
JSON.stringify({
pendingBooks: store.getState()["pendingBooks"],
finishedBooks: store.getState()["finishedBooks"]
}))
}
Hola midu , solouna pregunta resulta que el website de rome no existe, googleando he visto que cerraron este linter. ¿Lo seguimos usando?
Hola @midudev por que le pones usersReducer cuando lo importas en el store? le podes poner cualquier nombre al importar y lo toma igual? por que si te vas al slice.ts no aparece ese nombre es raro eso.. podes explicarlo?
Gracias
es porque al no importar nada usando las { } lo que importas del documento es lo que hay en el 'export default...' por eso al final del doc pone el export default, pero vamos que esta pregunta misma, se la haces a chat gpt y te responde explicandote mejor que que cualquiera en un comnetario de yt LOL
Midu cuando vienen los videos de zustand?
Hola, ya Rome no Existe más y no recibirá mantenimiento. Una lástima. ¡Creo ahora funcionará como Biome!
Tengo problemas con el middleware
Cuales problemas?
¿Qué problemas?
Esperen elmidleware es global no? osea si trabajo con otros reducers como postReducer, el cambio en el estado de este tambien entrara a ese midleware entonces no lo veo viable persistir en los midlewares, la unica solución que encontré de persistir la data sin acoplarla a redux es con el useEffect aplicado al estado de los usuarios, si alguien sabe como manegar de una mejor manera diganla porfa.
como se puede leer el localStorage desde Next 13, estoy consiente de que es SSR pero no encuentro una forma "correcta" o clara para hacer esto.
Dentro de un useEffect.
Quiero aprender zustand de la mano del wizard ❤
¡Hola!, alguien sabe por qué los estilos de Tremor podrían llegar a fallar? (hice lo mismo que el video, pero no funcionan) lo raro es que los estilos de tailwind si van, pero en los componentes no.
Porque no tienes la config corrects en el archivo de configuración de tailwind para que compile los estilos del node_modules de Tremor
@@midulive Hola midu!, gracias por responder.
En el archivo tailwind.config.ts tengo:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
// Path to the Tremor module
"./node_modules/@tremor/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
y en el index.ccs:
@tailwind base;
@tailwind components;
@tailwind utilities;
No sé si a eso te refieres.
Porque cuando creo un proyecto con vite, me instala automaticamente eslint?
Si has seguido los videos es por eso, ya que lo estamos usando en general desde la carpeta padre de projects
Como haces para que te autocomplete la consola de comandos?
Usa una consola diferente a la por defecto lamentablemente de momento solo está disponible para iOS
Hola :)
Gracias midu, aunque sí creo que deberías explicar un poco más las cosas que están implementando, qué hace y cómo funciona, porque siento que me he perdido mucho en este video la verdad, salí con más preguntas que respuestas :/
Lamentablemente Rome ya fue dado de baja: This repository has been archived by the owner on Aug 31, 2023. It is now read-only.
Estaba esperandolo! muchas gracias por tu conocimiento
Cual es la diferencia de PNPM y NPM?
pnpm es más rápido, además usa un almacenamiento centralizado, de esa forma no se instalan una y otra vez los paquetes sino que tienes vínculos a dónde estos se encuentran.
que terminal usas?
Una con IA que se llama Warp
Mi sueño es ser como midudev
A 5 meses Rome se murio😢
GG
Yo tratando de configurar rome tools, y me cae la sorpresa que lo descontinuaron :c
Hicieron fork y le cambiaron el nombre