Register con Redux

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

David Behar

student•

Falta la parte de mapDispatchToProps

const mapDispatchToProps = {
  registerRequest,
};

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

Carlos Spagnoletti

student•

Genial David, gracias por el aporte. ahora me funciona. Saludos y gracias.

Freddy Córdova Arana

student•

Genial David, gracias a tu aporte pude continuar sin problemas

Alejandro González Reyes

student•

Les comparto mi componente con explicaciones detalladas para su correcto funcionamiento.

// Indico que este componente va a tener estado propio
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
// 1. Importar modulo para conectar el componente con el store
import { connect } from 'react-redux';
// 2. Importar las acciones a ejecutar en el store a través de este componente
import { registerRequest } from '../actions';

import '../assets/styles/components/Register.scss';

// 5. El componente ejecuta acciones contra el store, por tanto activo sus props
const Register = (props) => {
  // Declaro el estado inicial del componente (la propiedad form representa toda el formulario, por ello le paso un objeto con el valor de incio de cada uno de sus campos)
  const [form, setValues] = useState({
    name: '',
    email: '',
    password: '',
  });

  // Funcion controladora de evento que se dispara cuando uno de los campos de formulario cambia su valor. (onChange)
  const handleInput = (event) => {
    // Establezco el nuevo estado del componente segun los valores actuales de cada input, pero conservando los anteriores (destructuración)
    setValues({
      ...form,
      [event.target.name]: event.target.value,
    });
  };

  // Función controladora de evento que se ejecuta tras dispararse el envio del formulario
  const handleSubmit = (event) => {
    event.preventDefault();
    // 6. Disparamos la acción registrar el usuario en el store
    props.registerRequest(form);
    // Redireccionar a otra ruta.
    props.history.push('/');
  };

  return (
    <section className='register'>
      <section className='register__container'>
        <h2 className='register__title'>Regístrate</h2>
        <form className='register__container--form' onSubmit={handleSubmit}>
          <input
            name='name'
            type='text'
            className='input'
            placeholder='Nombre'
            onChange={handleInput}
          />
          <input
            name='email'
            type='text'
            className='input'
            placeholder='Correo Electrónico'
            onChange={handleInput}
          />
          <input
            name='password'
            type='password'
            className='input'
            placeholder='Contraseña'
            onChange={handleInput}
          />
          <button type='submit' className='button'>Registrarme</button>
        </form>
        <p className='register__container--login'>
          Ya tienes una cuenta.
          <Link to='/login'>Inicia sesión</Link>
        </p>
      </section>
    </section>
  );
};

// 4. Establecer que acciones llevará a cabo este componente en el store
const mapDispatchToProps = {
  registerRequest,
};

// 3. Conectar el componente con el store
export default connect(null, mapDispatchToProps)(Register);

Oscar Barajas Tavares

Team Platzi•

Gran aporte, cuando termines tu aplicación y si haz documentado de esta forma compartenos tu repositorio.

sue herrera

student•

¡increíble! muchas gracias :D <3

Jhonatan David Ibarra Lavado

student•

estupendo ajjaj , casi me estreso, me faltaba

const mapDispatchToProps = { registerRequest, }; export default connect(null, mapDispatchToProps)(Register);

Javier Armando Vargas Vega

student•

Me ocurrió lo mismo. pero los comentarios me ayudaron para solucionarlo.

En el video no se mostró la parte de mapDispatchToProps

Angel Santillan Brambila

student•

jajaja me imagino, yo no tanto porque tenia la consola abierta y vi que me dijo que la funcion registerRequest no era una funcion luego luego vi que me faltaba esa parte .saludos

Andrés Campuzano Garzón

student•

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

Sergio Andres Rios Pabon

student•

creo que en el vídeo no explica la parte del mapDispatchtoProps, para que tengan cuidado y no les arroje el error a la hora de colocar los datos del registro en el estado.

Marcos Iglesias

student•

deberia quedar asi:

const mapDispatchToProps = { registerRequest, }

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

Luis Antonio Rodriguez Garcia

student•

Si, lo cortaron del vídeo, pero se alcanza a leer en el minuto 1:58

Diego Rodriguez

student•

tambien en vez de obtener history como props, se puede usar el custom hook de react router asi

import { useHistory } from 'react-router-dom
const history = useHistory()

history.push('/')

Irungaray Agustin

student•

A alguien mas le pasa que el Gravatar a veces no funciona?

Andrés Felipe Eslava Zuluaga

student•

Revisa bien el nombre de la acción y la función de gravatar. Para que lo entiendas mejor te aconsejo que uses console.log() en cada cosa para que veas qué puede suceder.

Martin Paez

student•

Podrias ser mas especifico en tu error?. Yo siempre uso un correo que tengo registrado en gravatar y siempre me respeta la imagen. Si uso cualquier otro que no, muestra una imagen generica de base.

Alan Alexis Arostegui Maranto

student•

Conectaremos el componente register con todo el flujo de redex.
Primero conectamos con redux, haciendo el import connect
import { connect } from 'react-redux';
exportamos.
export default connect(null, mapDispatchToProps)(Register);
Despues creamos un action que debe de encargarse de mandar la informacion que estamos capturando de los inputs cuando el usuario crea su cuenta y mandarlo a nuestro estado global por medio del reducer.
export const registerRequest = payload => ({
    type: 'REGISTER_REQUEST',
    payload
})
Importamos en nuestro componente Register.
import { registerRequest } from '../redux/actions'
Una vez importado podemos pasarlo como props en la funcion y utilizarlo en la funcion handleSubmit como props junto con el formulario.
Despues creamos el reducer que se encargará de obtener esa informacion y mandarla al estado.
        case 'REGISTER_REQUEST':
            return {
                ...state,
                user: action.payload
            }
Con history reedireccionamos a nuestro usuario a la raiz del proyecto una vez que su registro haya sido exitoso.

  const handleSubmit = e => {
    e.preventDefault();
    props.registerRequest(form)
    props.history.push('/')
  }```

Sebastián Buitrago

student•

se puede hacer el llamado de loginRequest y logoutRequest en un mismo componente ya que en mi caso use condicionales para adaptar el mismo diseño sin crear dos componentes diferentes pero me da este error usando redux

[aqui dejo link con el codigo del componente] (https://github.com/jasba24/PlatziVideoReact/blob/router-redux/src/components/FormLogin.jsx)

Sebastián Buitrago

student•

Si es posible, solo no me funcionaba porque tenia un typo pero pude usar los dos actions en el mismo componente

Carlos Luis Marin

student•

Sin duda alguna es bueno repetir los vídeos, a la primera puede ser abrumador pero poco a poco se van dando las cosas

Miguel Angel Reyes Moreno

student•

Los cambios: index.js de actions:

export const actions = {
  setFavorite: 'SET_FAVORITE',
  deleteFavorite: 'DELETE_FAVORITE',
  loginRequest: 'LOGIN_REQUEST',
  logoutRequest: 'LOGOUT_REQUEST',
  registerRequest: 'REGISTER_REQUEST',
};

index.js en reducers:

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

import React, { useState } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { registerRequest } from '../actions';

const Register = (props) => {
  const [form, setValues] = useState({
    email: '',
    name: '',
    password: '',
  });

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

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

const mapDispatchToProps = {
  registerRequest,
};

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

Rubén Jiménez Torres

student•

Falta esa parte en el vídeo. :)

const mapDispatchToProps = {
  registerRequest,
};```

Karen Paola Diaz Duarte

student•

practica: antes me salía error pero con el comentario de un compañero lo pude arreglar. comentario: hace falta este pedacito de código en register.jsx

const mapDispatchToProps = { registerRequest, };

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

Noe Adrián Acuña Prado

student•

esta vez me adelante porque estoy viendo que cuando lo sigo sin intentarlo antes me cuesta trabajo entenderle despues aqui esta el codigo

import React, {useState} from 'react';
import '../assets/styles/components/Register.scss';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { registerRequest } from '../actions/index'


const Register = (props) => {
  const [form, setForm] = useState({
    name : '',
    email : '',
    password : '',
  })
  const handleInput  = ( event ) => {
    setForm({
      ...form,
      [event.target.name] : event.target.value, // target.name toma el nombre del elemento que lo llame
    })                                          // por ejemplo name ='password'
  }
  const handleSubmit = ( event ) => {
    event.preventDefault()
    console.log(form)
    registerRequest({form})
    props.history.push('/')
  }
  return (
    <section className="register">
      <section className="register__container">
        <h2>Regístrate</h2>
        <form className="register__container--form" onSubmit = {handleSubmit}>
          <input 
            name='name'
            className="input" 
            type="text" placeholder="Nombre"
            onChange={handleInput} 
          />
          <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">Registrarme</button>
        </form>
        <Link to="/login">
          Iniciar sesión
      </Link>
      </section>
    </section>
  )
};

const mapDispatchToProps = {
  registerRequest,
}
export default connect(null,mapDispatchToProps)(Register)```

Ginnio Sarabia

student•

¿al usar el operador ternario es posible retornar varias lineas de html y no solo una?

Carlos David Ramírez Gómez

student•

Puedes retornar una pero puede ser un div con varios hijos o si necesitas varias validaciones puedes anidarlas como else if por ejemplo

{ hasUser ? &lt;User&gt; 
	: (hasPhoto ? &lt;Photo /&gt; 
		: ( hasSomething ) ? &lt;Something /&gt; 
		: &lt;etc..../&gt; ) }

Ginnio Sarabia

student•

Si. Muchas gracias utilizando un <div></div>

Camilo Echeverry

student•

La parte que falta del código se puede ver al minuto 1:58, pero la pasa sin explicar ... Por eso al profesor le funciona sin errores la aplicación.

Fidel Evangelista

student•

Ayuda con este error!

Ismael Grimaldo Vega

student•

Hola, Fidel. Puedes compartirnos el código de tu archivo index.js?

Ramses Garate

student•

Creo que el error es porque la carpeta se llama utils con s al final, lo que sucede es que estas tratando de importar un archivo y este no se encuentra en el directorio que tu estas especificando, prueba con revisar eso.

Jose Nuñez

student•

¿Que diferencia hay de hacerlo así? Usando el dispatch

const mapDispatchToProps = (dispath)=>({
  setPokemons: (value)=> dispath(setPokemmonsActions(value))
})

En lugar de como lo hizo el profesor?

const mapDispatchToProps = {
  registerRequest,
};

Lo miré en el curso avanzado de react redux :)

Tulio Junior Rangel Nuñez

student•

Por alguna razón no me lee el push para enviarme al home :/ Alguien con el mismo problema?

Edgar Andrés Angrino Lafaux

student•

Joven si usted esta usando la ultima version de React Router Dom ese metodo de usar push ya no sirve debe importar de react-router-dom esta funcion useNavigate

import { useNavigate } from "react-router-dom";
const navigate = useNavigate();
navigate("/");

Samuel Jose Vega Do Lugar

student•

Yo lo implementé así en Register.jsx:

import { useNavigate } from "react-router-dom";

function withRouter(Component) {
function ComponentWithRouterProp(props) {
    const navigate = useNavigate();
    return (
    <Component
        {...props}
        navigate={navigate}
    />
    );
}

Luego la función de handleSubmit

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

Y luego en la parte inferior del archivo:

const mapDispatchToProps = {
    registerRequest,
  };
export default withRouter(connect(null, mapDispatchToProps)(Register));

Ginnio Sarabia

student•

Si el sistema es grande el archivo ACTIONS y REDUCERS crecerá muchisimo? O como manejarlo?

Juan Castro

teacher•

Te recomiendo darle un vistazo a esta lectura: https://platzi.com/blog/estructura-organizacion-y-tipos-de-componentes-en-react/.

Frank Torres

student•

Siempre puedes organizar la estructura de tu proyecto por componentes o funcionalidades principales, así puedes agrupar acciones y reducers según a que contexto corrrespondan.

- /redux
  - /reducers
    - login.js
    - clases.js
    - foro.js
  - /acciones
    - login.js
    - clases.js
    - foro.js```

// Indico que este componente va a tener estado propio
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
// 1. Importar modulo para conectar el componente con el store
import { connect } from 'react-redux';
// 2. Importar las acciones a ejecutar en el store a través de este componente
import { registerRequest } from '../actions';

import '../assets/styles/components/Register.scss';

// 5. El componente ejecuta acciones contra el store, por tanto activo sus props
const Register = (props) => {
  // Declaro el estado inicial del componente (la propiedad form representa toda el formulario, por ello le paso un objeto con el valor de incio de cada uno de sus campos)
  const [form, setValues] = useState({
    name: '',
    email: '',
    password: '',
  });

  // Funcion controladora de evento que se dispara cuando uno de los campos de formulario cambia su valor. (onChange)
  const handleInput = (event) => {
    // Establezco el nuevo estado del componente segun los valores actuales de cada input, pero conservando los anteriores (destructuración)
    setValues({
      ...form,
      [event.target.name]: event.target.value,
    });
  };

  // Función controladora de evento que se ejecuta tras dispararse el envio del formulario
  const handleSubmit = (event) => {
    event.preventDefault();
    // 6. Disparamos la acción registrar el usuario en el store
    props.registerRequest(form);
    // Redireccionar a otra ruta.
    props.history.push('/');
  };

  return (
    <section className='register'>
      <section className='register__container'>
        <h2 className='register__title'>Regístrate</h2>
        <form className='register__container--form' onSubmit={handleSubmit}>
          <input
            name='name'
            type='text'
            className='input'
            placeholder='Nombre'
            onChange={handleInput}
          />
          <input
            name='email'
            type='text'
            className='input'
            placeholder='Correo Electrónico'
            onChange={handleInput}
          />
          <input
            name='password'
            type='password'
            className='input'
            placeholder='Contraseña'
            onChange={handleInput}
          />
          <button type='submit' className='button'>Registrarme</button>
        </form>
        <p className='register__container--login'>
          Ya tienes una cuenta.
          <Link to='/login'>Inicia sesión</Link>
        </p>
      </section>
    </section>
  );
};

// 4. Establecer que acciones llevará a cabo este componente en el store
const mapDispatchToProps = {
  registerRequest,
};

// 3. Conectar el componente con el store
export default connect(null, mapDispatchToProps)(Register);

Conectaremos el componente register con todo el flujo de redex.
Primero conectamos con redux, haciendo el import connect
import { connect } from 'react-redux';
exportamos.
export default connect(null, mapDispatchToProps)(Register);
Despues creamos un action que debe de encargarse de mandar la informacion que estamos capturando de los inputs cuando el usuario crea su cuenta y mandarlo a nuestro estado global por medio del reducer.
export const registerRequest = payload => ({
    type: 'REGISTER_REQUEST',
    payload
})
Importamos en nuestro componente Register.
import { registerRequest } from '../redux/actions'
Una vez importado podemos pasarlo como props en la funcion y utilizarlo en la funcion handleSubmit como props junto con el formulario.
Despues creamos el reducer que se encargará de obtener esa informacion y mandarla al estado.
        case 'REGISTER_REQUEST':
            return {
                ...state,
                user: action.payload
            }
Con history reedireccionamos a nuestro usuario a la raiz del proyecto una vez que su registro haya sido exitoso.

  const handleSubmit = e => {
    e.preventDefault();
    props.registerRequest(form)
    props.history.push('/')
  }```

export const actions = {
  setFavorite: 'SET_FAVORITE',
  deleteFavorite: 'DELETE_FAVORITE',
  loginRequest: 'LOGIN_REQUEST',
  logoutRequest: 'LOGOUT_REQUEST',
  registerRequest: 'REGISTER_REQUEST',
};

import React, { useState } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { registerRequest } from '../actions';

const Register = (props) => {
  const [form, setValues] = useState({
    email: '',
    name: '',
    password: '',
  });

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

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

const mapDispatchToProps = {
  registerRequest,
};

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

import React, {useState} from 'react';
import '../assets/styles/components/Register.scss';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { registerRequest } from '../actions/index'


const Register = (props) => {
  const [form, setForm] = useState({
    name : '',
    email : '',
    password : '',
  })
  const handleInput  = ( event ) => {
    setForm({
      ...form,
      [event.target.name] : event.target.value, // target.name toma el nombre del elemento que lo llame
    })                                          // por ejemplo name ='password'
  }
  const handleSubmit = ( event ) => {
    event.preventDefault()
    console.log(form)
    registerRequest({form})
    props.history.push('/')
  }
  return (
    <section className="register">
      <section className="register__container">
        <h2>Regístrate</h2>
        <form className="register__container--form" onSubmit = {handleSubmit}>
          <input 
            name='name'
            className="input" 
            type="text" placeholder="Nombre"
            onChange={handleInput} 
          />
          <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">Registrarme</button>
        </form>
        <Link to="/login">
          Iniciar sesión
      </Link>
      </section>
    </section>
  )
};

const mapDispatchToProps = {
  registerRequest,
}
export default connect(null,mapDispatchToProps)(Register)```

import { useNavigate } from "react-router-dom";

function withRouter(Component) {
function ComponentWithRouterProp(props) {
    const navigate = useNavigate();
    return (
    <Component
        {...props}
        navigate={navigate}
    />
    );
}

Register 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