Iniciando la clase vi este comentario y dije Hey que buena idea de utilizar actionTypes pero creo que no los voy a usar por ahora
al finalizar tenía un typo, adivinen de qué se trataba!
Recomendación: Ulilizar constantes en Redux.
Es recomendable usar constantes en redux, por ejemplo, crear un archivo que se llame "actionTypes.js", y dentro colocar lo siguiente:
Estas constantes las importaremos en los actions y en los reducers.
¿Con qué fin se usan estas constantes? Muchos no le encuentran sentido porque el valor tiene el mismo nombre que la constante, pero los beneficios son los siguientes.
Ayuda a mantener una consistencia y evita los errores al escribir código, ya que si escribes Strings en las actions y en los reducers puede que en una de esas veces te equivoques.
Algunas veces el usuario desea ver qué actions existen antes de trabajar en alguna. Si trabajas en un equipo puede que alguien la haya implementado. Tener todas las actions como constantes en un archivo te facilitará esa búsqueda.
La lista de_ action types_ que fueron añadidas, eliminadas o actualizadas en un _Pull Request _ayuda a todo el equipo a visualizar rápidamente qué cambios se están haciendo en la funcionalidad.
Si cometes un error (typo) cuando importas tus constantes, obtendrás undefined cuando intentes ejecutar tu código. Es más fácil encontrar este error de variable que intentando descifrar por qué no pasa nada cuando ejecutas tu action.
Espero que les haya servido de algo. No es algo que yo me haya inventado, muchos manejan esa escructura. Si gustan, aquí les dejo más información:
esta buena tu idea, ademas de que hardcodear no es una buena practica.
Ha sido doloroso pero reconfortante saber que he entendido. Por favor corrijanme lo que sea necesario. Es complejo entender el patrón de diseño de Flux, pues todo es archivos separados, pero tomando el tiempo de entender todo es legible. Les dejo mi comprensión, espero les aydue a quiénes no la logran de primera:
.
Se alimenta la aplicación por medio del Provider cuando definimos el createStore(reducer, initialState). Ésto le enviará información al componente que necesite acceder al Store.
// index.jsconst initialStore ={/* ... */}const store =createStore(reducer, initialState);ReactDOM.render(<Provider store={store}><App/></Provider>,document.getElementById('app'),);
1.1. El reducer va a recibir el estado inicial que se pasa en createStore , pero también, en su función recibirá la acción que debe hacer cuando ocurra un llamado al Store.
.
2. Dentro del reducer vamos a devolver el estado actualizado del Store únicamente cuando ocurra una acción, cuando se despache una acción . Dependiendo de la acción el estado del store se actualiza o se queda igual, sea agregar a favorito o crear un estado inicial al ingresar a Home, respectivamente por ejemplo.
2.1. El payload es lo que vamos a enviarle a la acción, que recibirá el reducer, para actualizar el Store o actualizar el estado.
.
3. Al tener definida la estructura del Store, del reducer y de las acciones, podemos definir funciones para manejar estas acciones directamente en el UI --> Renderizamos la información en componente Home:
3.1. Conectamos Home al Store por medio de connect():
3.2. Definimos la información que debe traer Home desde el store, es por eso que se define ++mapStateToProps++ , pues será el argumento que trae del estado de Store la información que necesita el componente, y pasa como PROPIEDADES al mismo componente:
Estas propiedades las recibe el componente CarouselItem y serán las que pinten una película. sea en la lista de Trends u Originals. 4.1. Para que reciba props, se debe conectar el componente al Store:
4.2. El objeto mapDispatchToProps trae las ACCIONES. Se realiza puesto que en cada CarouselItem vamos a ejecutar una acción que modificará el Store -> Estas acciones también se podrán llamar por medio de los PROPS del componente. Logrando que podamos definir los manejadores de estas acciones:
Renderizando cada uno de los items que existen en el Store.
.
5. El render inicial hará que existan listas de Trends y Originals, pero cada uno de los CarouselItem tendrá una acción: setFavorite y deleteFavorite. Estas acciones manipulan el Store definiendo los estados para la lista de favoritos (myList).
Ya que estamos descomponiendo el valor id de props, no veo la razon de crear una arrow function en el evento onclick para pasarle el valor del id.
Pensé lo mismo exactamente cuando lo estaba haciendo, funciona igual
totalmente de acuerdo.
¿Porque ejecuta las funciones de los actions llamandolas como desde los props? es decir, porque usa: props.setFavorite, o props.DeleteFavorite
Justo para eso sirve el mapDispatchToProps, por convención de Redux los actions deben de pasarse a los props y ser usados desde ahí.
Aunque también se puedan importar y ejecutar directamente donde los necesitamos, las buenas prácticas indican que debemos pasarlos hacia las props.
Gracias! Justo creo que eso es lo que no me había terminado de comprender, fui a doc de redux para terminar de comprenderlo, dejo acá el Link donde terminé de comprender como el connect() 'transforma' el componente de manera que modifica sus props
una pregunta, por que hay veces que se llaman las funciones en el onClick de esa manera y otras veces se omite el "() =>" ? gracias de antemano!
Recuerda que cuando escribes () => estás definiendo una función. Si lo pones o lo omites dependerá de si quieres crear una función nueva en la definición o si ya tienes una función que puedes usar directamente.
Te dejo un ejemplo de los 2 casos. Los 2 son exactamente iguales, solo que en uno definimos la función antes y en el otro la definimos en el mismo tag.
al tomar está carrera pude aprender que a cada momento podemos adquirir nuevos conocimientos... me pude sorprender de lo que se puede hacer con javascript
Genial el uso de Redux, es complicado pero con la práctica todo se aprende
Igualmente, aun no comprendo muy bien pero espero que al practicar pueda resolver mis dudas
Tienes razón no es fácil, pero si es importante saberlo.
Práctica: my prefect code.
Esta guía sirve para entender el manejos de los eventos en React, yo tuve esa duda, con los handlers
filter() crea un nuevo array con todos los elementos que cumplan la condición implementada.
Una vez sabiendo eso
items => items.id !== action.payload
hacemos que el ID del item no sea igual al que estamos buscando (para que cuando encuentre el id que queremos eliminar, no lo incluya en el nuevo array) así, agregar el nuevo al array al state, que es myList:
Ahora entiendo un poco mas por la respuesta de Fernando pero no comprendo todavía porque la comparación se hace con action.payload. Acaso ese objeto no contiene muchos elementos? se supone que items.id es un entero y action.payload un objeto, o con la funcion map ya lo estamos iterando también al igual que items?
Estuve viendo el Curso de Redux por Bedu y no lo logre terminarlo por la cantidad de vacios que estaba teniendo con respecto a algunos componentes de Redux... llevo estas pocas clases con el profesor Oscar y porfin logré sintetizar de una manera muy facil y entendible (para mi) el uso de ++mapStateToProps++ y ++mapDispatchToProps++.....
Respeto y admiración total por la forma tan fácil en la que enseña el profesor ☝
Espero no ser el único que con cada clase que termino se me dibuja una sonrisa!! animo chicos y chicas dentro de poco vamos a crear cosas muy interesantes!!
Hola, tengo este error, alguien me puede ayudar, desde que agregué actions y reducers no me funcionó mas, mando imagen de actions, reducers y CarouselItem. MUCHAS GRACIAS!!!
++Este es CarouselItem++
import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { setFavorite, deleteFavorite } from '../actions';
import '../assets/styles/components/CarouselItem.scss';
import playIcon from '../assets/static/play-icon.png';
import plusIcon from '../assets/static/plus-icon.png';
import removeIcon from '../assets/static/icons8-delete-64.png';
De acurdo a lo que dice el error es que no reconoce el evento "onClik" y es por que no lo estas escribiendo bien, deberia ser "onClick", cambialo y prueba de nuevo.
Espero te sirva!!
Sí, muchas gracias @DevEdgar, era ese el error, muchas gracias por la devolución
¿Cuando uno hace f5 en el navegador, todo se pierde?
Si es un formulario si, si quieres que los datos perduren necesitas crear un método que guarde los cambios temporalmente en el storage del navegador y los cargue cuando la página se cargue.
Muchas gracias, otra consulta que tengo es si tengo un backend podría tener una forma de preguntar con alguna función si hizo f5, por ejemplo una función que consuma el localstorage algún email que guarde antes y si hace f5 teniendo el email podría volve a consumir y volver a rellenar los datos.
