Finalizando reducers y eliminar favoritos

Clase 14 de 29 • Curso de React Router 5 y Redux

Clase anteriorSiguiente clase

Daniel Pereira Perez

student•

En lo personal no recomiendo pasar el nombre de las acciones como texto plano, es muy posible crear typos.

Deberían utilizar un objeto intermediario que maneje cada acción, en mi caso queda algo así: Actions

Reducers

Juan Castro

teacher•

Sip. Son los actionTypes. Son una muy buena práctica para depurar y evitar typos lo más de tontos.

El profesor lo explica muy bien en esta clase: https://platzi.com/clases/1613-redux/20655-archivos-typ-9/.

leonardo Oteca

student•

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!

Carlos Hernández Méndez

student•

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:

export const SET_FAVORITE = 'SET_FAVORITE'
export const DELETE_FAVORITE = 'DELETE_FAVORITE'

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:

Rodrigo Rodriguez

student•

esta buena tu idea, ademas de que hardcodear no es una buena practica.

Andrés Felipe Eslava Zuluaga

student•

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.js
const 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.

// actions.js
export const setFavorite = (payload) => ({
  type: 'SET_FAVORITE',
  payload,
});

export const deleteFavorite = (payload) => ({
  type: 'DELETE_FAVORITE',
  payload,
});

2.2. Cuando el reducer recibe ese payload por medio del action, podemos hacer algo con la informació, en este caso, se actualiza la lista myList

// reducer.js
const reducer = (state, action) => {
  switch (action.type) {
    case 'SET_FAVORITE':
      console.log('action -> ', action);
      return {
        ...state,
        myList: [
          ...state.myList.filter((item) => item.id !== action.payload.id),
          action.payload,
        ],
      };

    case 'DELETE_FAVORITE':
      console.log('state.myList -> ', state.myList);
      return {
        ...state,
        myList: state.myList.filter((item) => item.id !== action.payload),
      };

    default:
      return state;
  }
};

export default reducer;

. 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():

// Home.jsx
export default connect(mapStateToProps, null)(Home);

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:

// Home.jsx
const mapStateToProps = (state) => {
  return {
    myList: state.myList,
    trends: state.trends,
    originals: state.originals,
  };
};

3.3. Se pasan las propiedades a Home:

// Home.jsx
const Home = ({ myList, trends, originals }) => {
  return (
    <>
      <Search />
      { myList.length > 0 && (
        <Categories title='Mi lista'>
          <Carousel>
            {myList?.map((item) => {
              return (
                <CarouselItem key={item.id} {...item} />
              );
            })}
          </Carousel>
        </Categories>
      )}

      <Categories title='Originals'>
        <Carousel>
          {originals?.map((item) => {
            return (
              <CarouselItem key={item.id} {...item} />
            );
          })}
        </Carousel>
      </Categories>

      <Categories title='Trends'>
        <Carousel>
          {trends?.map((item) => {
            return (
              <CarouselItem key={item.id} {...item} />
            );
          })}
        </Carousel>
      </Categories>

    </>
  );
};

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:

// CarouselItem
const mapDispatchToProps = {
  setFavorite,
  deleteFavorite,
};

export default connect(null, mapDispatchToProps)(CarouselItem);

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:

// CarouselItem.jsx
const CarouselItem = (props) => {
  const { id, cover, title, year, contentRating, duration } = props;

  const handleSetFavorite = () => {
    props.setFavorite({
      id, cover, title, year, contentRating, duration,
    });
  };

  const handleDeleteFavorite = () => {
    props.deleteFavorite(id);
  };

  return (
    !id ? (
      <>
        <p>La lista está vacía</p>
      </>
    ) :
      (
        <>
          <div className='Carousel--item'>
            <img className='Carousel--item__img' src={cover} alt={title} />
            <div className='Carousel--item__details'>
              <p className='Carousel--item__details--title'>{title}</p>
              <p className='Carousel--item__details--subtitle'>
                {`${year} | ${contentRating} | ${duration}`}
              </p>
              <div className='Carousel--item__details--buttons'>
                <img src={playIcon} alt='Play' />
                <img src={plusIcon} alt='Plus' onClick={handleSetFavorite} />
                <img src={removeIcon} alt='Delete' onClick={handleDeleteFavorite} />
              </div>
            </div>
          </div>
        </>
      )
  );
};

CarouselItem.propTypes = {
  id: PropTypes.number,
  cover: PropTypes.string,
  title: PropTypes.string,
  year: PropTypes.number,
  contentRating: PropTypes.string,
  duration: PropTypes.number,
};

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).

Ronald Maco

student•

Gracias por la información.

Rodrigo Rodriguez

student•

Wow, excelente aporte, ! lo lei completo!

Andrés Campuzano Garzón

student•

🦄 Acá todo el código de la clase hasta este momento: https://github.com/AndresCampuzano/React-Router-and-Redux/commit/a3a4ae8f9addc5807b5421dc30be793fed16a639

Henry Caicedo Velasco

student•

Gracias

Andrés Felipe Eslava Zuluaga

student•

gracias!

Marco Alejandro Rodriguez Ferrer

student•

Una sugerencia para que no se agregue el mismo elemento varias veces a myList puede ser:

Daniel Alejandro Contreras Suárez

student•

Yo escribi la funcion handleDeleteFavorite de la siguiente manera:

const handleDeleteFavorite = () =&gt; {
    props.deleteFavorite(id);
  };

Y en el onclick de remove quedo asi:

onClick={handleDeleteFavorite}

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.

Edgar Ocampo

student•

Pensé lo mismo exactamente cuando lo estaba haciendo, funciona igual

Daniel Abanto

student•

totalmente de acuerdo.

Marco Mesén Campos

student•

¿Porque ejecuta las funciones de los actions llamandolas como desde los props? es decir, porque usa: props.setFavorite, o props.DeleteFavorite

Luis Lira

student•

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.

Marco Mesén Campos

student•

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

Carlos Eduardo Santaella Guevara

student•

<img 
          className="carousel-item__details--img" 
          src={removeIcon} 
          alt="Plus Icon"
          onClick={() => handleDeleteFavorite(id)}
        />

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!

Nicolás Arias González

student•

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.

const Ejemplo = function (id, handleLike) {

	const onLikeClick = () => {
		handleLike(id);
	}

	return (
		<div>
			<input onChange={handleChange} />
			<a onClick={() => handleLike(id)} href="#">Like<a>
			<a onClick={onLikeClick} href="#">Like<a>
		</div>
	)
}

john fredy quimbaya orozco

student•

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

Jose Daniel Molina

student•

Genial el uso de Redux, es complicado pero con la práctica todo se aprende

Platzi Team

student•

Igualmente, aun no comprendo muy bien pero espero que al practicar pueda resolver mis dudas

Jimmy Buriticá Londoño

student•

Tienes razón no es fácil, pero si es importante saberlo.

Karen Paola Diaz Duarte

student•

Práctica: my prefect code.

Sebastián Rodrigo Díaz

student•

Esta guía sirve para entender el manejos de los eventos en React, yo tuve esa duda, con los handlers

https://www.w3schools.com/react/react_events.asp

Alex Camacho

teacher•

Gracias por compartir, es un recurso bastante útil :muscle:

Enmanuel Castillo

student•

Hello, alguien podría explicarme esta línea completa?

myList: state.myList.filter(items => items.id !== action.payload)

Gracias :D

Fernando Ropero

student•

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:

David Dias

student•

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?

Jozek Andrzej Hajduk Sánchez

student•

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 ☝

Omar Dario Melendrez

student•

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

Celina Alejandra Speroni

student•

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';

const CarouselItem = (props) => { const { id, cover, title, year, contentRating, duration } = props; const handleSetFavorite = () => { props.setFavorite({ id, cover, title, year, contentRating, duration }) } const handleDeleteFavorite = (itemId) => { props.deleteFavorite(itemId) } return ( <div className="carousel-item"> <img className="carousel-item__img" src={cover} alt={title} /> <div className="carousel-item__details"> <div> <img className="carousel-item__details--img" src={playIcon} alt="Play Icon" /> <img className="carousel-item__details--img" src={plusIcon} alt="Plus Icon" onClik={handleSetFavorite} /> <img className="carousel-item__details--img" src={removeIcon} alt="Remove Icon" onClick={() => handleDeleteFavorite(id)} /> </div> <p className="carousel-item__details--title">{title}</p> <p className="carousel-item__details--subtitle"> {${year} ${contentRating} ${duration}} </p> </div> </div> ) };

CarouselItem.propTypes = { id: PropTypes.number, cover: PropTypes.string, title: PropTypes.string, year: PropTypes.number, contentRating: PropTypes.string, duration: PropTypes.number, }

const mapDispatchToProps = { setFavorite, deleteFavorite, }

Edgar Lopez Arroyo

student•

Hola @Celina75!

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

Celina Alejandra Speroni

student•

Sí, muchas gracias @DevEdgar, era ese el error, muchas gracias por la devolución

Henry Fehrmann

student•

¿Cuando uno hace f5 en el navegador, todo se pierde?

Ismael Torres

student•

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.

Henry Fehrmann

student•

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.

Andres Caro

student•

Para los amantes de los iconos comparto

https://fontawesome.com/

Laura Camila Pregonero

student•

Good Class!!!

........................... ............................

Tomas Goldenberg

student•

como podriamos hacer para que el remove-icon solo se muestre en myList y no en todas las secciones?

Marco Mesén Campos

student•

Si puedes hacerlo con un if, dentro de la function haces algo así

if(isMyList){
	<img 
 		'atributos del tipo que necesitas'
	/>
} else {
	<img 
		'otros atributos'
	/>
}

Y recibes el 'isMyList' desde los props

Finalizando reducers y eliminar favoritos

Bienvenida al curso

Todo lo que aprenderás sobre React Router y Redux

¿Qué es React Router? y Aplicarlo en tus proyectos

¿Qué es React Router y cómo instalarlo?

Crear nuestro archivo de Rutas

Container: Login

Container: Register

Container: 404 Not Found

Componente: Layout

Manejando enlaces y configuraciones

¿Qué es Redux?

Qué es Redux

¿Qué es Redux? Profundizando en la herramienta

Instalación de Redux

Creando el Store de Redux

Aplicando Redux a nuestra aplicación

Creando los reducers

Finalizando reducers y eliminar favoritos

Debuggeando nuestro proyecto (agregando validaciones a nuestro componente card)

Crear Formulario de Login

Formulario de Login con Redux

Creando un Servicio para Gravatar

Uso de gravatar en nuestro proyecto

Validación para LogIn LogOut

Register

Register con Redux

Vista general del player

Arreglando la funcionalidad del player

Terminando de detallar nuestro player

Validaciones

Validaciones de UI

Debug con Redux Devtools

Cierre del curso

Cierre del Proyecto