Validación para LogIn LogOut

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

Martin Munilla

student•

por primera vez en el curso logre entender el funcionamiento de los reducer y actions y logre codear el logout sin ver la clase

Ramiro Sotelo

student•

leer estos comentarios antes de empezar la clase me motivan !

Tomas Salina

student•

Si no hubiera leído este comentario, ni siquiera lo habría intentando. Pero lo logré, gracias!!

José Enrique Pérez Aquino

student•

Al fin pude entender el sentido de Redux, definitivamente es necesario practicar e intentar hacer las cosas sin ayuda.

Básicamente, la función connect recibe dos parámetros

mapStateToProps y mapDispatchToProps

En palabras resumidas, la primera solicita datos del store(la base de datos) y el segundo envía datos.

Así solamente hay un flujo de datos y todo es mas simple. Me exploto la cabeza. Animo para aquellos que aun están batallando

Luis Anibal Olivares Zarraga

student•

Diooos me acabas de dar la vida con esa explicacion, era de las cosas que no entendia de redux

Jimmy Buriticá Londoño

student•

Buen comentario

Jesús Miguel Quinto Teran

student•

Reto:

import PropTypes from 'prop-types';
...
Header.propTypes = {
  user: PropTypes.object
}

Miguel Angel Reyes Moreno

student•

¿Estamos validando que el usuario es un objeto?

Christian Humberto

student•

seria

email: PropTypes.string,

y lo mismo para el password luego se usarian de dos maneras

props.email

en los inputs o desestructurando

const {email, password} = props

y en los inputs un value={email}

Javier Fuentes Mora

teacher•

Hola creo que todo se peude poner dentro de una validacion de hasUser no necesitamos dos :

 {hasUser ? (
            <>
              <li>
                <a href='/'>{user.name}</a>
              </li>
              <li>
                <a href='#logout' onClick={handleLogout}>Cerrar Sesión</a>
              </li>
            </>
          ) : (
            <li>
              <Link to='/login'>Iniciar Sesión</Link>
            </li>
          )}```

David Behar

student•

Yo pensé en lo mismo

Esteban Casallas

student•

si, se ve mejor !

Jonatan Ariste

student•

Epico! con redux y configurando los actions manejando todo desde un mismo estado es increíble cómo se ahorra código y todo sale como magia. Hermoso!

Oscar Barajas Tavares

Team Platzi•

Exactamente, esto permite tener un código limpio, ordenado y todo fluye.

Henry Caicedo Velasco

student•

si, se ahorra bastante codigo.

César Ernesto Rivas Martínez

student•

Nota: al principio pensé que mapDispatchToProps se tenía que llamar así por obligación, pero yo le puse mapActions e igual funciona.

const mapActions = {
  logoutRequest
}


export default connect(mapStateToProps,mapActions)(Header)

Luis Alberto Colunga Pérez

student•

No, solo es un nombre por default para que no te confundas en ocaciones

Fabián Antonio Salgado Sepúlveda

student•

mapActions se esa en VueJS

Marco Luna

student•

Este era el ejemplo que buscaba sobre como conviven ambas partes, el mapStateToProps y el mapDispatchToProps

Andres Felipe Valencia Benitez

student•

Reto:

Header.propTypes = {
  user: PropTypes.object.isRequired,
  logoutRequest: PropTypes.any.isRequired,
};

Sofia Nupieri

student•

Tambien podria ser mas especifico:

logoutRequest: PropTypes.func.isRequired

Jhonatan David Ibarra Lavado

student•

amigo porque object?

Carlos Arboleda

student•

Muy bien explicado, de los mejores profes, demuestra experiencia y transmite seguridad. Hacer un breve repaso al final de la clase es muy útil para atar cabos sueltos. Deberían realizarlo más seguido los otros profes cuando se abarcan varios conceptos que pueden ser confusos. 🙃

Andrés Campuzano Garzón

student•

🦄 Acá el código de lo que llego hasta el momento: https://github.com/AndresCampuzano/React-Router-and-Redux/commit/94290b811ed0c0a04ed723f7e6adb48c3ff5dae8

Samuel Miranda Martínez

student•

Reto: CarouselItem.jsx

CarouselItem.propTypes = {
  id: PropTypes.number,
  cover: PropTypes.string,
  title: PropTypes.string,
  year: PropTypes.number,
  contentRaiting: PropTypes.string,
  duration: PropTypes.number,
  isList: PropTypes.bool,
  setFavorite: PropTypes.func,
  deleteFavorite: PropTypes.func,
};

Header.jsx

Header.propTypes = {
  user: PropTypes.object,
  logoutRequest: PropTypes.func,
};

Angie Garcia

student•

import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import gravatar from '../utils/gravatar';
import { logoutRequest } from '../actions';
import '../assets/styles/components/Header.scss';
import logo from '../assets/static/logo-platzi-video-BW2.png';
import userIcon from '../assets/static/user-icon.png';

const Header = (props) => {
  const { user } = props;
  const hasUser = Object.keys(user).length > 0;

  const handleLogout = () => {
    props.logoutRequest({});
  };

  return (
    <header className='header'>
      <Link to='/'>
        <img className='header__img' src={logo} alt='Platzi Video' />
      </Link>
      <div className='header__menu'>
        <div className='header__menu--profile'>
          {hasUser ?
            <img src={gravatar(user.email)} alt={user.email} /> :
            <img src={userIcon} alt='iconodeusuario' />}
          <p>Perfil</p>
        </div>
        <ul>
          {hasUser ?
            <li><a href='/'>{user.name}</a></li> :
            null}
          {hasUser ?
            <li><a href='#logout' onClick={handleLogout}>Cerrar Sesión</a></li> : (
              <li>
                <Link to='/Login'>
                  Iniciar sesión
                </Link>
              </li>
            )}
        </ul>
      </div>
    </header>

  );
};
const mapStateToProps = (state) => {
  return {
    user: state.user,
  };
};

const mapDispactchToProps = {
  logoutRequest,
};

Header.propTypes = {
  user: PropTypes.object,
  logoutRequest: PropTypes.func.isRequired,
};

export default connect(mapStateToProps, mapDispactchToProps)(Header);

Christian Michael Rosales

student•

import PropTypes from 'prop-types';
Header.propTypes = {
  user: PropTypes.object,
  logoutRequest: PropTypes.func,
};

Miguel de la Rosa

student•

para que sirve la parte de object.keys(user) ?

Stefania Amortegui Cardenas

student•

Cuando tienes un objeto tipo { key : value } como el siguiente

const myObject = {name: "PePIto", age: 100}

y quieres obtener solamente las key de ese objeto usas

Object.keys(myObject)

esto va a retornar un array con las key que tiene ese objeto

[ "name",  "age"]

y como devuelve un array podemos usar la propiedad length para saber la longitud de ese array

const longitud =  Object.keys(myObject).length

console.log(longitud)
2

y podemos jugar con las condiciones

Object.keys(myObject).length > 0
true

Object.keys(myObject).length > 10
false

Sofia Nupieri

student•

El user.name no tiene ningun valor

Marco Mesén Campos

student•

Valida que el input del login tenga el name, sino nunca se guardará de manera correcta

DAMIÁN NICOLAS PINEDO

student•

dispatch es el valor que nos regresara? y el map state es lo que nosotros enviamos? o como

Daniel Ruiz

student•

Que son proptypes?, no entiendo el reto que nos pone al final del video

sergio enrique sanhueza osorio

student•

Nos sirve para verificar los tipos de las propiedades de los componentes, De esta forma, en desarollo, podemos saber si estamos pasándole al componente los tipos de datos correctos. Es similar a TypeScript.....

Te dejo un enlace que tiene algo de info al respecto:

haz clic aquí

Daniel Ruiz

student•

Gracias por la explicacion ¿hay algun curso en platzi queprofundice en el tema?

Imelda Antonia Barrios Morales

student•

Reto

import PropTypes from 'prop-types';

Header.propTypes = {
  user: PropTypes.object,
  logoutRequest: PropTypes.func,
};

Francisco Imanol Suarez

student•

Reto

import PropTypes from 'prop-types';

Header.propTypes = {
  user: PropTypes.object,
  logoutRequest: PropTypes.func.isRequired,
};```

Alejandro González Reyes

student•

Porque al redireccionar dentro de este componente Header no deja

const handleLogout = (event) => {
    event.preventDefault();
    // La data pasada al store es un objeto vacio (el usuario hizo logout)
    props.logoutRequest({});
    props.history.push('/login');
  };

Oscar Barajas Tavares

Team Platzi•

Podrías compartirme tu repositorio del proyecto para revisarlo a detalle.

Daniel Esteves

student•

¡Hola! Sería super excelente que nos compartieras el enlace a tu repositorio y podamos ver en que está dando el error :muscle:

 {hasUser ? (
            <>
              <li>
                <a href='/'>{user.name}</a>
              </li>
              <li>
                <a href='#logout' onClick={handleLogout}>Cerrar Sesión</a>
              </li>
            </>
          ) : (
            <li>
              <Link to='/login'>Iniciar Sesión</Link>
            </li>
          )}```

CarouselItem.propTypes = {
  id: PropTypes.number,
  cover: PropTypes.string,
  title: PropTypes.string,
  year: PropTypes.number,
  contentRaiting: PropTypes.string,
  duration: PropTypes.number,
  isList: PropTypes.bool,
  setFavorite: PropTypes.func,
  deleteFavorite: PropTypes.func,
};

import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import gravatar from '../utils/gravatar';
import { logoutRequest } from '../actions';
import '../assets/styles/components/Header.scss';
import logo from '../assets/static/logo-platzi-video-BW2.png';
import userIcon from '../assets/static/user-icon.png';

const Header = (props) => {
  const { user } = props;
  const hasUser = Object.keys(user).length > 0;

  const handleLogout = () => {
    props.logoutRequest({});
  };

  return (
    <header className='header'>
      <Link to='/'>
        <img className='header__img' src={logo} alt='Platzi Video' />
      </Link>
      <div className='header__menu'>
        <div className='header__menu--profile'>
          {hasUser ?
            <img src={gravatar(user.email)} alt={user.email} /> :
            <img src={userIcon} alt='iconodeusuario' />}
          <p>Perfil</p>
        </div>
        <ul>
          {hasUser ?
            <li><a href='/'>{user.name}</a></li> :
            null}
          {hasUser ?
            <li><a href='#logout' onClick={handleLogout}>Cerrar Sesión</a></li> : (
              <li>
                <Link to='/Login'>
                  Iniciar sesión
                </Link>
              </li>
            )}
        </ul>
      </div>
    </header>

  );
};
const mapStateToProps = (state) => {
  return {
    user: state.user,
  };
};

const mapDispactchToProps = {
  logoutRequest,
};

Header.propTypes = {
  user: PropTypes.object,
  logoutRequest: PropTypes.func.isRequired,
};

export default connect(mapStateToProps, mapDispactchToProps)(Header);

const handleLogout = (event) => {
    event.preventDefault();
    // La data pasada al store es un objeto vacio (el usuario hizo logout)
    props.logoutRequest({});
    props.history.push('/login');
  };

Validación para LogIn LogOut

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