Redireccionar

Clase 51 de 57 • Curso de Redux por Bedu

Contenido del curso

Bienvenido al curso

Repaso React

Introducción a Redux

11
¿Qúe es Redux, cuándo usarlo y por qué?
00:15 min

Fases de Redux

Fases Extra

Compartir información en Redux

Métodos HTTP

Conclusión

Tomar examen

Comentarios

Matias Sebastian Perez

student•

Yo en vez de usar un operador ternario lo hago de la siguiente forma:

{ (this.props.redirect) && <Redirect to='/tareas' /> }

Luis Felipe Medina Rodriguez

student•

este if ternario tiene un nombre como tal?

Miguel Angel Reyes Moreno

student•

¡Hola Matias! Justamente el otro día vi en Twitter que usar "&&" es una mala práctica en React. Te comparto el enlace: https://twitter.com/nmartindev/status/1420149869176627205

Frank Antonio Piñin Ato

student•

Me gusto el video, ojala no empiece la Tercera guerra mundial y sea embano mi conocimientos adquiridos :v

Bautista Tancredi

student•

En vano.

Juan Jose Vega

student•

Llego el coronavirus :v

Willy David Da Conceicao Lozada

student•

Apuntes cortos y sencillos para todo el mundo y toda la familia xD

En el tareasReducer inicializamos un atributo en el estado llamado regresar en false
Cuando le den click al botón de guardar y cuando se ejecute el dispatch de tipo AGREGADA ese caso en el reducer seteamos el estado de regresar a true y en el caso de TRAER_TODAS seteamos a regresar a false
Y en el componente de Guardar.js en el render evaluamos si regresar es true redirecciona a tareas/index.js
Adicional seteamos en el caso de AGREGADA los valores de usuario_id y titulo a “” para que los inputs queden limpios

Conclusion: Cuando se le de click al boton de guardar para agregarle una tarea a un usuario, redireccionamos a las tareas.

ANTHONY JEAMPIER RANGEL RODRIGUEZ

student•

Gracias por el aporte!

Brayan Felipe Getial

student•

Para los que les de el error de

Attempted import error: 'Redirect' is not exported from 'react-router-dom'

solo cambien el Redirect por Navigate

Diego Ivan Padilla Bernal

student•

También se pudo poner el Redirect al principio del render y antes del return

render() {
    if (this.props.return) return <Redirect to="/tasks" />;
    return (

Usuario anónimo

user•

Me parece más limpio de la forma en que lo plantea compa, de esa manera el contenido de return trataría de contener en la mayor medida posible, etiquetas html (JSX) sin tanto condicional.

Edson Gonzalo

student•

si estas ocupando react-Router, también podes hacerlo de esta manera:: this.props.history.push('/Personas');

Manuel Rivera

student•

Creo que es mucho mas sencillo si utilizamos history que nos da React Router en los props de los componentes que enrutamos, así como nos da match.

Entonces utilice history de la siguiente manera.

En la función de Agregar simplemente le pase la nueva tarea y los props que tenía ese componente, recibí la nueva tarea y los props en el actionCreator, y de los props, utilice history para automaticamente apenas todo sea exitoso y se ejecute el dispatch , me dirija a la URL que se le indique, sin necesidad de agregar nada al estado del componente o al estado del Reducer que estamos utilizando. El código es


 // En el componente AddTasks  
   
    handleClick = () => {
    const { Id, Title, Add } = this.props;
    const NewTasks = {
      Id: Id,
      Title: Title,
      completed: false
    };
    Add(NewTasks, this.props);
  };

//En el Action Creator del componente Tasks

export const Add = (NewTasks, { history }) => async dispatch => {
  console.log(history);
  dispatch({ type: LOADING });
  try {
    const response = await Axios.post(
      "https://jsonplaceholder.typicode.com/todos",
      NewTasks
    );

    dispatch({
      type: ADD
    });

    history.push("/Task");
  } catch (error) {
    console.log(error.message);
    dispatch({
      type: ERROR,
      payload: error.message
    });
  }
};```

Luciano Cavallo

student•

A estas alturas del 2022 , les recomiendo que usen el hook useNavigate de react-router-dom 😎.

Kenneth Angulo L

student•

Concuerdo, react-router-dom ha tenido varias actualziaciones y mejoras.

Les comparto como lo solucione (estoy usando tambien funcional components)

hay que importar:

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

dentro de la funcion llamamos al hook:

const navigate = useNavigate();

y donde el profesor valida, en este caso en el return de la funcion ponemos la redireccion asi:

{(props.regresar) ? navigate('/tasks') : ''}

Cristian Andres Ladino Peña

student•

(this.props.regresar) ? <redirect to='/tareas' /> : ' '

Esta parte no la conocía o no la tenía clara. Es como un if en JavaScript o solo para este ambiente?

Willy David Da Conceicao Lozada

student•

Amigo se le conoce como operador ternario y es js vanilla y funciona igual que un if solo que es totalmente necesario el else. aqui unos ejemplos espero te sea interesante...

mira este video

 // (CONDICION) ? RESULTADO_CIERTO : RESULTADO FALSO
        var edad = 12
        var puedeVotar = ( edad > 18 ) ? "Puede votar" : "No puede botar"

        // eso es lo mismo que esto
        if ( edad > 18 ) { //si la edad es mayor a 18
            var puedeVotar = "Puede votar"
        } else {
            var puedeVotar = "No puede botar"
        }

        alert( puedeVotar )

Enmanuel castillo

student•

tengo un problema, cuando agrego una tarea no me redirecciona, y no encuentro el problema, ¿alguien con buen ojo que me ayude?

este es mi codigo:

render() { return ( <div> { (this.props.regresar) ? <Redirect to='/tareas' /> : '' }

se queda cargando

Enmanuel castillo

student•

import React, { Component } from 'react';
import { connect } from 'react-redux'
import Spinner from '../general/Spinner.js';
import Fatal from '../general/Fatal.jsx';
import { Redirect } from 'react-router-dom';

import * as tareasActions from '../../actions/tareasActions.js'

class Guardar extends Component {

    cambioUsuarioId = (event) => {
        this.props.cambioUsuarioId(event.target.value);
    };
 
    cambioTitulo = (event) => {
        this.props.cambioTitulo(event.target.value);
    };

    guardar = () => {
        const { usuario_id, titulo, agregar} = this.props;
        const nueva_tarea = {
            userId: usuario_id,
            title: titulo,
            completed: false
        };
        agregar(nueva_tarea)
    }

    deshabilitar = () => {
        const { usuario_id, titulo, cargando} = this.props;
            
        if (cargando) {
            return true;
            } ;

        if (!usuario_id || !titulo) {
            return true
            };
        
        return false;
    };

    mostrarAccion = () => {
        const { error, cargando } = this.props;
        if (cargando) {
            return <Spinner />;
        }

        if (error) {
           return  <Fatal mensaje={error}/>
        }
    };
    

    render() {
        return (
            <div>
                {
                 (this.props.regresar) ? <Redirect to='/tareas' /> : ''
                }
                    
                     <h1>Guardar Tarea</h1>

                Usuario id:
                <input
                    type="number"
                    value={this.props.usuario_id}
                    onChange={this.cambioUsuarioId}
                    />

                <br/><br/>

                Titulo:
                <input 
                    type="text"
                    value={this.props.titulo}
                    onChange={this.cambioTitulo}
                    />

                <br/><br/>
                
                <button 
                onClick={ this.guardar }
                disabled={ this.deshabilitar() }>
                 guardar
                 </button>

                 { this.mostrarAccion() }
                

            </div>
        )
    }
}

const mapStateToProps = ({ tareasReducer }) => tareasReducer;

export default connect(mapStateToProps, tareasActions)(Guardar);

Nikolas Santis

student•

Compañero, con la información entregada no es posible ayudarte sin saber cómo tienes los actions y reducers. Lo que debes hacer es compartir un repositorio para ayudarte mejor. Saludos

Andres Roberto Coello Goyes

student•

El ( Redirect ) y mucho mas se ve en curso de React Router https://platzi.com/clases/react-router/

Cristian Andres Ladino Peña

student•

Excelente clase. 🙂

Juan Felipe Salamanca Gonzalez

student•

Aunque me genero un poco de problemas al escribir el codigo, conseguí completar la clase y entender bien :D

Melissa González Nebrijo

student•

Entendido

Johan García Trejo

student•

un buena clase

Grace Nikole Avarado

student•

Aquí pueden encontrar la documentación de Redirect de react-router

Paul Cortes

student•

Excelente clase

Gonzalo Pimentel

student•

Que buena, sigamos!

 // En el componente AddTasks  
   
    handleClick = () => {
    const { Id, Title, Add } = this.props;
    const NewTasks = {
      Id: Id,
      Title: Title,
      completed: false
    };
    Add(NewTasks, this.props);
  };

//En el Action Creator del componente Tasks

export const Add = (NewTasks, { history }) => async dispatch => {
  console.log(history);
  dispatch({ type: LOADING });
  try {
    const response = await Axios.post(
      "https://jsonplaceholder.typicode.com/todos",
      NewTasks
    );

    dispatch({
      type: ADD
    });

    history.push("/Task");
  } catch (error) {
    console.log(error.message);
    dispatch({
      type: ERROR,
      payload: error.message
    });
  }
};```

 // (CONDICION) ? RESULTADO_CIERTO : RESULTADO FALSO
        var edad = 12
        var puedeVotar = ( edad > 18 ) ? "Puede votar" : "No puede botar"

        // eso es lo mismo que esto
        if ( edad > 18 ) { //si la edad es mayor a 18
            var puedeVotar = "Puede votar"
        } else {
            var puedeVotar = "No puede botar"
        }

        alert( puedeVotar )

import React, { Component } from 'react';
import { connect } from 'react-redux'
import Spinner from '../general/Spinner.js';
import Fatal from '../general/Fatal.jsx';
import { Redirect } from 'react-router-dom';

import * as tareasActions from '../../actions/tareasActions.js'

class Guardar extends Component {

    cambioUsuarioId = (event) => {
        this.props.cambioUsuarioId(event.target.value);
    };
 
    cambioTitulo = (event) => {
        this.props.cambioTitulo(event.target.value);
    };

    guardar = () => {
        const { usuario_id, titulo, agregar} = this.props;
        const nueva_tarea = {
            userId: usuario_id,
            title: titulo,
            completed: false
        };
        agregar(nueva_tarea)
    }

    deshabilitar = () => {
        const { usuario_id, titulo, cargando} = this.props;
            
        if (cargando) {
            return true;
            } ;

        if (!usuario_id || !titulo) {
            return true
            };
        
        return false;
    };

    mostrarAccion = () => {
        const { error, cargando } = this.props;
        if (cargando) {
            return <Spinner />;
        }

        if (error) {
           return  <Fatal mensaje={error}/>
        }
    };
    

    render() {
        return (
            <div>
                {
                 (this.props.regresar) ? <Redirect to='/tareas' /> : ''
                }
                    
                     <h1>Guardar Tarea</h1>

                Usuario id:
                <input
                    type="number"
                    value={this.props.usuario_id}
                    onChange={this.cambioUsuarioId}
                    />

                <br/><br/>

                Titulo:
                <input 
                    type="text"
                    value={this.props.titulo}
                    onChange={this.cambioTitulo}
                    />

                <br/><br/>
                
                <button 
                onClick={ this.guardar }
                disabled={ this.deshabilitar() }>
                 guardar
                 </button>

                 { this.mostrarAccion() }
                

            </div>
        )
    }
}

const mapStateToProps = ({ tareasReducer }) => tareasReducer;

export default connect(mapStateToProps, tareasActions)(Guardar);

Redireccionar

Bienvenido al curso

Conoce a tu profesor y todo lo que aprenderás sobre Redux

¿Qué conocimientos me recomiendan para tomar este curso?

Repaso React

¿Qué es React y cómo funciona?

Preparando nuestro entorno de trabajo

Creación de la app con React

Agregando funciones a la app con React

Stateful vs Stateless

Ciclo de vida de React

Manejando promesas

React Router DOM

Introducción a Redux

¿Qúe es Redux, cuándo usarlo y por qué?

Fases de Redux

Introducción: las fases de Redux

Store

Reducers

Conexión a un componente

Action Creators

Redux Thunk

Explicación teórica: ciclo completo de Redux

Práctica: ciclo completo de Redux

Fases Extra

Archivos Types

Try Catch

Escenarios asíncronos

Componente Spinner

Componente Fatal

Tabla como componente

Compartir información en Redux

Introducción Compartir información en Redux

Parámetros por URL

Compartir Reducer

Múltiples Reducers

Llamando a múltiples reducers en una acción

Uso del estado en la acción

Evitar segundas búsquedas

Inmutabilidad

Evitar sobrescritura

Validación compuesta

Validación de errores

Modificando respuesta de url

Estado con interacción

Mostrar componentes dinámicamente

Llamadas asincronas dinámicas

Props por herencia vs estado

Estado compartido

Métodos HTTP

Introducción a métodos HTTP

Nuevo ciclo Redux

Normalizar datos

Mapear Objetos

Componente para agregar tarea

Manejar inputs con Reducer

POST

Deshabilitando botón

Redireccionar

Reutilizar componentes

PUT

DELETE

Últimos detalles

Conclusión

Conocimientos adquiridos

Qué hacer a continuación