:(
Me tomó mucho tiempo entender Redux, tuve que volver a reproducir las clases y buscar en internet sobre arreglos y objectos porque no tenía ni idea de porque a veces destructurabas o por qué, y tampoco tenía idea de cómo funcionaban los datos y el estado pero ya por fin entendí.
Esto es de verdadera ayuda amigo gracias por compartir y por el laburo que hiciste!
Esto es genial bro, gracias por el aporte :)
Tercera vez que miro este video y contando...
ah no soy el unico jaja
la verdad
Después de repetir las clases, este es mi resumen:
El Storage es como una base de datos de los estados
El connect permite la conexión entre el componente con el Storage y tiene 2 parámetros. Ejemplo - Connect (Primero,Segundo):
Primero: Envía el estado actual del Storage al componente para que sea utilizado por medio de su props. Para lograrlo, se crea una función que indicará que atributos se quieren utilizar en el componente y luego las asigna a su props.
Segundo: Envía al Reduce la acción que hemos encapsulado y que, por alguna razón que aún no entiendo, al ser llamada por el import en el componente se le atribuye su props. Cuando esta acción llega al Reduce, es identificada mediante el Switch por su atributo Type para su ejecución. Luego, el Reduce envía el resultado al Storage para su actualización.
Importante: El Reduce también tiene 2 atributos "(state, action)":
state: Es el estado que el Stage envía al Reduce. Por lo tanto, es el estado que se va a actualizar.
action: Es la acción encapsulada que fue enviada por el componente al Reduce para que se actualice el estado del Stage.
Espero haberme dejado entender y que a alguien más se sirva para que siga aprendiendo sin muchas dudas en las siguientes clases.
Genial, estuvo muy bueno tu aporte. Muchas gracias por contribuir.
Gracias!
Mencionar que si les surge un error de que cada item deberia tener una key, es porque no lo estamos mandando en el payload de setFavorite en CarouselItem, con esto lo pueden solucionar:
el problema sigue pasando si escoges dos veces el mismo item porque hay duplicidad de ids. En este caso ¿qué se puede hacer?
Corregié ese problema en modificar los key del archivo Home.jsx
<Search/>{mylist.length>0&&(<Categories title='Mi Lista'><Carousel>{mylist.map((item)=>(<CarouselItem key={`${item.id}_mylist`}{...item}/>))}</Carousel></Categories>)}<Categories title='tendencias'><Carousel>{trends.map((item)=>(<CarouselItem key={`${item.id}_trends`}{...item}/>))}</Carousel></Categories><Categories title='Originales de PlatziVideo'><Carousel>{originals.map((item)=>(<CarouselItem key={`${item.id}_originals`}{...item}/>))}</Carousel></Categories>
Con este video entendí como funciona todo, no es necesario hagan el ejercicio yo solo mire los primeros 30 min y fue suficiente para entender como funcionaba todo
Click para ir al video
Espero les sirva de algo
Esta muy buena su explicacion
Muy Bueno BRO ! 1K GRACIAS
Para elementos repetidos dentro del array, yo hice lo siguiente , modifiqué el reducer para filtrar si existe ese elemento dentro del state.myList.
Se me ocurre que otra validación que se puede hacer, es que al añadir el item a myList, ahora el item original mostraría un boton de quitar de myList que sustituya al boton de añadir a la lista.
intento mio de entender el proceso de redux
Creando reducers en React
En esta ocasión vamos a guardar los favoritos que agreguemos con el boton de añadir a favoritos de nuestra interfaz. Para ello comenzamos creando y exportando la función setFavorite de nuestro archivo de actions:
exportconstsetFavorite=payload=>({// Retornamos y exportamos la función un objetotype:'SET_FAVORITE',// Este es el nombre/descripción que le vamos a dar a nuestro action payload // El payload se le podría llamar como la acción de la UI})
Con esto ya tendriamos nuestro archivo de actions listo, ahora debemos ir a nuestro ir a nuestro reducers para manejar la información que recibimos.
La función de Reducer recibe dos parametros que son el state y el action. Con eso claro vamos a hacer una validación con switch para añadir elementos a la myList cuando el action sea el de SET_FAVORITE:
NOTA: Recordar que los parametros de state y action los conseguimos mas adelante cuando hagamos el connect con nuestra función setFavorite.
constreducer=(state, action)=>{switch(action.type){// Vamos a validar el type que habimaos mencionado que es como la descripción del actioncase'SET_FAVORITE'return{...state,// Desestructuramos la variable state myList =[...state.myList, action.payload]// Asignamos nuevos valores a mylist que fueron los que se trajeron del action. Si no desestructuramos la myList se sobrescribiran y no se añadiran nuevos favoritos}default// Caso por defecto si no cumple el action con ningunoreturn state
}}
Ya con estos dos archivos listos nos dirigimos al componente donde tengamos nuestro videoItem
Lo primero que debemos hacer es importar connect y exportar nuevamente pero con la función de connect:
import{connect}from'react-redux'...exportdefaultconnect(null, mapDispatchToProps)(videoItem)// El primer parametro va null porque no vamos a solicitar props sino vamos a enviarlos
Ahora debemos definir nuestro mapDispatchToProps con nuestro action a enviar*:*
const mapDispatchToProps ={ setFavorite
}
Para hacer esto también hay que importar setFavorite de actions:
import{setFavorite}from'../actions'
Ya con esto tendriamos que definir nuestra función manejadora que se llamaría handleSetFavorite y la creamos dentro de nuestro componente:
Se me hizo interesante el 'Snake case', no sabía que tenía un nombre, sólo conocía el Camel Case.
Para quien le interese, hay más tipos de case:
camelCase
Raw: user login count
Camel Case: userLoginCount
PascalCase
Raw: user login count
Pascal Case: UserLoginCount
snake_case
Raw: user login count
Snake Case: user_login_count
Snake Case (All Caps): USER_LOGIN_COUNT
kebab-case
Raw: user login count
Kebab Case: user-login-count
Artículo completo.
Todo bien. Solo me sale un warning:
"backend.js:6 Warning: Each child in a list should have a unique "key" prop."
En la clase de debug aprendemos como hacerlo :D
Ese Warning se debe a que en React cuando defines una lista tienes que asignarle a cada elemento un identificador único.
me dice que state.myList is not iterable 😥
Nos podrias compartir tu codigo para poder verificar donde puede estar el error.
Puedes mostrar tu codigo?
Lo que puede estar pasando es que no estes inicializando el array y no valides su iteracion, que se ejecute solo si tiene un length mayor a 0, o si minimamente tiene la propiedad length.
Otro error comun, es que lo inicalices como objeto, con corchetes
Aun no entiendo redux, ni su objetivo y mucho menos su funcionamiento
Redux es una libreria para manejar los estados, React puede hacerlo muy bien por si solo, pero cuando una aplicación va creciendo es ideal usar Redux para delegarle exclusivamente el manejo del estado y usar react para la lógica y crear las interfaces.
Redux lo que hace es para tener una lugar único desde donde tu información va a consultar y cambiar datos. Esto lo que hace es que podrás pasar entre páginas sin perder la información que ya tienes guardada en ese momento, además de acceder a información desde un componente si necesidad de estar pasando la información entre componentes.
Entiende por "estado de la aplicación" cosas como, si está logueada o no la persona, sus preferencias en su configuración, etc.
Me pasé un día completo sin entender un bug, y era solamente que en un archivo había puesto
mylist
y lo correcto era
myList
🤣
jajaja me pasó lo mismo, muchas gracias
En mi caso como modifiqué el json no podía hacerlo funcionar directamente de la forma que está en el vídeo. Por lo que tuve que hacer algo que se usa en el curso de Redux con Bedu. que fue mapear mis array de listas, entonces que cuando encontrará a "Mi lista", hiciera push del payload a mi array llamado "videos" que contiene la lista.
Si alguien hizo algo similar a lo que yo hice con el JSON y tiene problemas en esta parte, les dejo mi código del reducer :)
case'SET_FAVORITE':const newLists = state.lists.map(list=>{let value ={...list}if(list.title==="Mi lista"){ list.videos.push(action.payload)}return value
})return{...state,lists: newLists
}
Las Actions describen que algo pasó, pero no especifican cómo cambió el estado de la aplicación en respuesta. Esto es trabajo de los reducers.
Que diferencia, ahora si entiendo como interactua cada elemento de nuestro componente, para solicitar la ejecución de una acción hacia nuestro store. La carga util es el dato que modifica el estado de la app.
Buenas Prácticas:
Muchas cosas no están estandarizadas en Redux, por lo que brinda flexibilidad para personalizar las cosas, pero como la mayoría de nosotros no queremos una solución personalizada para cada pequeño detalle cotidiano, la comunidad tiende a establecer lo que se conoce como "buenas prácticas".
Para separar este tipo de datos de los datos normales, se utiliza la propiedad conocida como "payload". Ahora, sobre qué podemos pasar po "payload" y qué debería estar en el mismo nivel es discutible, pero un estándar popular (recomendado por los documentos oficiales) es "Flux Standard Action" la Acción estándar de flujo que establece que entre los requisitos oficiales puede agregar un "payload" , un "error" o un "metapropierty".
**POR TANTO:
**Cualquier información sobre la acción que no sea el "type" o "estado de la acción" debe ser parte del campo de "payload".
A mi me salio el error que decia cada item deberia tener un Key unico.
Esto pasa porque no estamos recibiendo un key en cada CarouselItem, y por lo tanto tampoco estamos enviando un key a myList, entonces ahi es donde nos salta el error.
Adicionalmente, en mi codigo, yo encontre que a lllamar la lista de CarouselItems, no le estaba pasando ningun key ni ningun prop a los CarouselItems de myList en Home, por lo que los items en myList salian con todas sus propiedades undefined .
Todo ésto lo podemos solucionar, siguiendo estos pasos:
Asegurarnos de que estamos enviandole un ID (Key unico) y todas las props que necesitamos a cada CarouselItem que llamamos en myList en Home:
Verificar que estamos recibiendo un ID (Key unico) para cada CarouselItem y que estemos definiendo un proptype para ID (Key unico) en la declaracion de CarouselItem (src/components/CarouselItem.jsx):
