Formulario de Login con Redux

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

Andrés Felipe Eslava Zuluaga

student•

Creo que con éste paso del Login fue mucho más entendible la forma en qué se construye la forma de manejar la información con Redux: Pensemos siempre en ésta imagen:

++1. El componente:++ Siempre debe estar suscrito al Store para saber, por medio del reducer, cómo va a actualizar la información del estado. Esto significa que al tener esa conexión podemos realizar el envío (dispatch) de las acciones al Reducer. ++2. Actions:++ Las acciones por sí solas son un sencillo objeto, que por buena práctica se retornan en una función. Esta función es pasada al Reducer para poder realizar la función / acción (action) que corresponde a la estructura de la aplicación. ++3. El Reducer:++ Es la función que determina los cambios de estado de la aplicación. Es acá donde ocurren los cambios del estado (Store). Es una función pura que devuelve un objeto con el estado actual, después de haber ejecutado la acción que corresponda:

Si tiene un llamado por medio de una acción enviada desde el componente, ejecutará alguna acción que corresponda a la interacción del usuario
Si es la primera vez que se ejecuta, o sea el estado incial, igualmente ejecuta una acción, que se ve reflejada como el retorno del estado inicial, un estado default que devuelve el estado del Store. ++4. El Store:++ Es quién contiene el estado de todo el aplicativo, la única fuente de verdad (hablando en los términos de Redux), El sitio que contiene el estado del todo el aplicativo.
Tiene conexión con el Componente si éste se encuentra suscrito (o conectado), - Comprende las acciones enviadas desde el Componente para que el Reducer le diga cómo debería determinar su estado. . Espero les ayude, a mí me ayudó mucho. Les dejo algo de apoyo haciendo click acá

Jimmy Buriticá Londoño

student•

Gracias por el resumen

Matías Wasiak

student•

Buen aporte!

Nick David Fuenmayor Molinares

student•

Por si acaso, si alguien tiene el formulario un componente con el formulario y no directamente en el login como lo hice yo van a necesitar un componente mágico de orden superior que se llama withRouter que permite añadir el history a un componente más profundo, dejo el ejemplo de mi código del LoginForm.

import React, { useState } from 'react';
import { connect } from 'react-redux';
import { Link, withRouter } from 'react-router-dom';
import { loginRequest } from '../actions';
import '../assets/styles/components/LoginForm.scss';

const LoginForm = (props) => {
  const [isChecked, setIsChecked] = useState(false);
  const [form, setValues] = useState({
    email: '',
  });

  const { history } = props;

  const handleInput = (event) => {
    setValues({
      ...form,
      [event.target.name]: event.target.value,
    });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    props.loginRequest(form);
    history.push('/');
  };

  return (
    <div className='login-section__form-container'>
      <div className='login-section__form'>
        <h1 className='form__title'>Inicia sesión</h1>
        <form onSubmit={handleSubmit}>
          <input aria-label='Campo de usuario para iniciar sesión' className='input__text' type='text' id='user' name='email' placeholder='Usuario o email' onChange={handleInput} />
          <input aria-label='Campo de contraseña secreta para iniciar sesión' className='input__text' type='password' id='pass' name='pass' placeholder='Contraseña' onChange={handleInput} />
          <label className={isChecked ? 'input__check--label label-checked' : 'input__check--label input__check--label-before'} htmlFor='remember'>
            <input onClick={() => setIsChecked(!isChecked)} className='input__check' type='checkbox' name='remember' id='remember' />
            Recordar sesión
          </label>
          <button className='main-btn form-submit' type='submit'>Iniciar sesión</button>
        </form>

        <div className='remember-password__container'>
          <Link className='remember-password__btn' to='/'>¿Haz olvidado tu contraseña?</Link>
        </div>
      </div>
    </div>
  );
};

const mapDispatchToProps = {
  loginRequest,
};

export default withRouter(connect(null, mapDispatchToProps)(LoginForm));

Como se dará cuenta, llamo a withRouter desde 'react-router-dom', recibo el history por los props y luego exporto el componente con withRouter.

David Vargas Domínguez

student•

Gracias por tu aporte, fue de mucha ayuda. :D

Félix Andersson

student•

Me salvaste

Enrique Yael C

student•

recuerden que el boton debe de ser tipo 'submit' si no no va a funcionar su login

<button className='button' type='submit'>Iniciar sesión</button>```

Juan Sebastian Torchia

student•

Gracias me estaba fallando por esto! <3

Rodrigo Rodriguez

student•

En mi caso no lo tengo asi ,

<button className="button">Iniciar sesión</button>

Y pareciera que funciona.

Andrés Campuzano Garzón

student•

🦄 Acá el código hasta el momento: https://github.com/AndresCampuzano/React-Router-and-Redux/commit/3e00f49a6bb1c042a87a700e81a8621dc406c669

Santiago Ventura

student•

crackk!!!!!!!

Victor Baruch Pazaran Jaimes

student•

Les comparto este codigo que utilice en el header para poder mostrar el nombre de nuestro ususario en el header una vez que ya haya iniciado sesion

y aqui el codigo

import React from 'react';
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import '../assets/styles/components/Header.scss';
import logo from '../assets/images/logo-platzi.png';
import userIcon from '../assets/images/profile-user.svg';

const Header = ({ user }) => {
   console.log(user.email)
   return(
   <header className="header">
      <Link to="/"> 
         <img className="header__img" src={ logo } alt="" />
      </Link> {/* Usamos el elemento link de react router dom, ya que nos permite poder
      desplazarnos por nuestra aplicacion sin necesidad de hacer un refres a la pagina completa */}
      <div className="header__menu">
         <div className="header__menu--profile">
            <img src={ userIcon } alt="user icon" />
            <p>Perfil</p>
         </div>
         {user.email !== undefined ?
            <ul>
               <li><p>Bienvenido <b>{user.email}</b></p></li>
               <li><p>Mi perfil</p></li>
               <li><Link to="/register">Registro</Link></li>
            </ul>
            :
            <ul>
               <li><Link to="/login">Iniciar sesion</Link></li>
            </ul>
         }
      </div>
      
   </header>
)};

const mapStateToProps = state => {
   return {
      user: state.user,
   }
}
export default connect(mapStateToProps,null)(Header);

José Ocando

student•

props.history.push('/')

Jhonatan David Ibarra Lavado

student•

estupendo, me esta gustando cada día mas react, tengo que ponerme más autodidacta :D

Roso Peñaranda

student•

¿por qué no puedo acceder a user desde props como hago con las otras variables?

const { user, myList, trends, originals } = props;

si imprimo por consola user, me dice que no esta definido, ¿como podria acceder a ese valor? al mostar props por cosola puedo ver las variables: myList, trends y original, pero no las otras variables que estan en el initialState

usando redux-dev-tool veo que si esta funcionando los reducer, pero sigo sin entender por qué no puedo acceder a los otros datos del inicialState

Roso Peñaranda

student•

Ya solucione, no era suficiente con agregar user a los props que recibe el componente, tenia que agregarlos tambien al mapStateProps, haciendo que quedara así:

const mapStateToProps = state => {
  return {
    user: state.user,
    myList: state.myList,
    trends: state.trends,
    originals: state.originals,
  };
};

Markoz Peña Mendez

student•

Recuerda que si quieres tener acceso al estado global, no importa por mas anidado que pueda estar el componente. Tienes que usar mapSatetToProps, para inyectar el estado a ese componente para que pueda leerlo.

Sebastián Rodrigo Díaz

student•

No logro entender como es que el componente le pasa la información al ‘payload’ del ‘action’ cuando se hace la ‘const mapDispatchToProps’. ¿ Como la función que está adentro obtiene los valores de payload del action si no le estamos pasando nada?

Sebastián Rodrigo Díaz

student•

La respuesta mi pregunta está acá, hay un codigo de ejemplo también:

https://www.pluralsight.com/guides/different-ways-to-dispatch-actions-with-redux

Según la página, traté de traducirlo lo mejor que pude:

“El segundo argumento para la función ‘connect’ es la función ‘mapDispatchToProps’, que es un contenedor para todos los creadores de ‘actions’ usando el el método ‘dispatch’ y al componente. De la documentación oficial para ‘connect’, podemos describir ‘mapDispatchToProps’ de esta manera: si se pasa un objeto, se asume que cada función dentro de él es un creador de ‘actions’ de Redux. Un objeto con los mismos nombres de función, pero con cada creador de ‘actions’ envuelto en una llamada de ‘dispatch’ para que puedan ser invocados directamente, se fusionará con los ‘props’ del componente. Lo anterior implica que no necesitamos despachar nuestras acciones. Solo necesitamos pasar un objeto a "conectar". Luego podemos llamar a las acciones envueltas desde nuestros ‘props’.”

Paolo Donato Torregrosa Navarro

student•

Aun no comprendo del todo esta linea:

export default connect(null, null)(login);

Y tampoco el metodo connect de redux en general

Oscar Barajas Tavares

Team Platzi•

Nos permite conectar nuestra aplicación al flujod e Redux, conecte recibe los siguientes parametros:

connect() Parameters mapStateToProps?: Function c?: Function | Object mergeProps?: Function options?: Object

Los primeros dos son los mas utilizados, mapStateToProps nos permite conectar los props del estado al componente y mapStateToProps permite conectar los actions como un prop dentro del componente.

Manuel Diaz

student•

y porque los envias null

Jorge Alberto Rodriguez Flores

student•

Karen Paola Diaz Duarte

student•

Súper genial!! prácticas:

Fernando Azuaje

student•

como puede ver lo que tengo en el estado? para ver al usuario que se agrega

Steven Benjamín Diaz Flores

student•

Tengo la misma duda, utilizo las herramientas de desarrollo de Redux, pero de dice que no hay ningún store conectado.

Marcelo Gustavo Baez

student•

Para un uso basico de Redux dev tools, simplemente agregá esta linea (luego de initialState) como parámetro a la funcion createStore:

const store = createStore(
  reducer,
  initialState,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
);

Laura Camila Pregonero

student•

Buena clase Profe, comprendì muy bien lo que explicaste!!! Estoy muy feliz de seguir aprendiendo Programación !!!!

Ruben Peña

student•

A mi

props.history.push('/')

Me da error por que el

props.history

es undefined

alguien sabe que puede pasar?

este es mi código:

import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { loginRequest } from '../actions'
import '../assets/styles/components/LoginForm.scss'
import googleIcon from '../assets/static/google-icon.png'
import twitterIcon from '../assets/static/twitter-icon.png'

const LoginForm = props => {
    const [form, setValues] = useState({
        email: '',
    })
    const handleInput = event => {
        setValues({
            ...form,
            [event.target.name]: event.target.value
        })
    }
    const handleSubmit = (event) => {
        event.preventDefault()
        props.loginRequest(form)
        props.history.push('/')
    }
    return (
        <section className="login">
            <section className="login__container">
                <h2>Inicia sesión</h2>
                <form className="login__container--form" onSubmit={handleSubmit}>
                    <input
                        name="email"
                        className="input"
                        type="text"
                        placeholder="Correo"
                        onChange={handleInput}
                    />
                    <input
                        name="password"
                        className="input"
                        type="password"
                        placeholder="Contraseña"
                        onChange={handleInput}
                    />
                    <button className="button">Iniciar sesión</button>
                    <div className="login__container--remember-me">
                        <label>
                            <input type="checkbox" id="cbox1" value="first_checkbox" />Recuérdame
                        </label>
                        <a href="/">Olvidé mi contraseña</a>
                    </div>
                </form>
                <section className="login__container--social-media">
                    <div><img src={googleIcon} /> Inicia sesión con Google</div>
                    <div><img src={twitterIcon} /> Inicia sesión con Twitter</div>
                </section>
                <p className="login__container--register">
                    No tienes ninguna cuenta
                    <Link to="/register">
                        Regístrate
                    </Link>
                </p>
            </section>
        </section>
    )
}

const mapDispatchToProps = {
    loginRequest,
}

export default connect(null, mapDispatchToProps)(LoginForm)

Andres Moreno

student•

Puedes exportar el component LoginForm con withRouter, pero como en este caso se está usando redux, tienes que exportarlo con compose, de la siguiente forma:

export default compose(
	withRouter,
	connect(null, mapDispatchToProps)(LoginForm)
)

No te olvides de agregar ++withRouter++ en los named-imports de react-router-dom que tienes en la parte de arriba Y ++compose++ es un metodo de la libreria react-redux

Espero te sea de ayuda, un saludo!

Andres Moreno

student•

Perdona, dejame corregir el error que tengo en el codigo anterior Debes exportarlo de la siguiente forma:

export default compose(
  withRouter,
  connect(null, mapDispatchToProps)
)(LoginForm);

Saludos!!

Jhon Brichman Bellido Vargas

student•

cambios en el history con la v6 de react-router-dom

import React, {useState} from "react";
import { connect } from "react-redux";
import {Link,useNavigate  } from "react-router-dom";
import { loginRequest } from "../actions";

import googleIcon from "../assets/static/google-icon.png";
import twitterIcon from "../assets/static/twitter-icon.png";
import '../assets/styles/components/Login.scss'

const Login = props => {
    let navigate = useNavigate();
    const [form, setValues] = useState({
        email: '',
    });

    const handleInput = event => {
        setValues({
            ...form,
            [event.target.name]: event.target.value
        })
    }

    const handleSubmit = event => {
        event.preventDefault();
        props.loginRequest(form);
        console.log(form);
        navigate('/');
    }

    return (
        <section className="login">
            <section className="login__container">
                <h3>Inicia sesión</h3>
                <form className="login__container--form" onSubmit={handleSubmit}>
                    <input
                        name="email"
                        className="input" 
                        type="text" 
                        placeholder="Correo"
                        onChange={handleInput}
                    />
                    <input
                        name="password" 
                        className="input" 
                        type="password" 
                        placeholder="Contraseña"
                        onChange={handleInput}
                    />
                    <button className="button" type='submit '>Iniciar sesión</button>
                    <div className="login__container--remember-me">
                    <label>
                        <input type="checkbox" id="cbox1" value="first_checkbox" />Recuérdame
                    </label>
                    <a href="/">Olvidé mi contraseña</a>
                    </div>
                </form>
                <section className="login__container--social-media">
                    <div><img src={googleIcon}/> Inicia sesión con Google</div>
                    <div><img src={twitterIcon}/> Inicia sesión con Twitter</div>
                </section>
                <p className="login__container--register">
                    No tienes ninguna cuenta 
                    <Link to="/register">
                        Regístrate
                    </Link>
                </p>
            </section>
        </section>
    );
};

const mapDispatchToProps = {
    loginRequest,
}

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

Miguel Angel Reyes Moreno

student•

Vamos a mandar nuestra información a nuestro estado con Redux. Aquí simulamos un login.

index.js de actions:

export const loginRequest = (payload) => ({
  type: actions.loginRequest,
  payload,
});

import { loginRequest } from '../actions'; //*No haec falta escribir el index porque ya se entiende que se quiere ese archivo al tener ese nombre

const Login = (props) => {

  const handleSubmit = (event) => {
    event.preventDefault(); //*Para que no se haga la acción de enviar formulario
    props.loginRequest();
    props.history.push('/'); //*Redirigimos al usuario al home
  };
};

const mapDispatchToProps = {
  loginRequest,
};

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

index.js de reducers:

case actions.loginRequest:
  return {
    ...state,
    user: action.payload,
  };

Alejandro Betancur

student•

Hola.. tengo una duda a quien no le guarda la información en el store?

Nathaly Stefani Riaño Bejarano

student•

Estaba viendo que no se actualiza user en el state... la action se dispara bien, llega al reducer, el action.type hace match con el case, el action.payload tiene la información, pero no la asigna a user 🤷‍♀️

Luis Rodriguez

student•

hola! pudieron solucionar su problema?

Ana Paula Santillán Sánchez

student•

Saben cuál es el curso de autentificación de la escuela de JavaScrip? :D

Carlos Alfonso Garcia Rivera

student•

autenticacion con passportjs

Marco Mesén Campos

student•

Porqué acá le creamos un state local al component login si lo vamos a pasar a redux?

Julián Scialabba

student•

Porque en el state local vamos guardando los cambios que se van haciendo en los inputs mediante los onChange y al state de redux solo le mandamos este state local con todos los cambios. No estaria bien tener en el state de redux datos de login incompletos.

Formulario de Login con Redux

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