Redireccionar

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

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

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

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

1. En el tareasReducer inicializamos un atributo en el estado llamado regresar en false

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

3. Y en el componente de Guardar.js en el render evaluamos si regresar es true redirecciona a tareas/index.js

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

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 (

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

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
    });
  }
};```

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

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

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

Excelente clase. 🙂

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

Entendido

un buena clase

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

Excelente clase

Que buena, sigamos!