Bienvenido al curso

1

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

2

驴Qu茅 conocimientos me recomiendan para tomar este curso?

Repaso React

3

驴Qu茅 es React y c贸mo funciona?

4

Preparando nuestro entorno de trabajo

5

Creaci贸n de la app con React

6

Agregando funciones a la app con React

7

Stateful vs Stateless

8

Ciclo de vida de React

9

Manejando promesas

10

React Router DOM

Introducci贸n a Redux

11

驴Q煤e es Redux, cu谩ndo usarlo y por qu茅?

Fases de Redux

12

Introducci贸n: las fases de Redux

13

Store

14

Reducers

15

Conexi贸n a un componente

16

Action Creators

17

Redux Thunk

18

Explicaci贸n te贸rica: ciclo completo de Redux

19

Pr谩ctica: ciclo completo de Redux

Fases Extra

20

Archivos Types

21

Try Catch

22

Escenarios as铆ncronos

23

Componente Spinner

24

Componente Fatal

25

Tabla como componente

Compartir informaci贸n en Redux

26

Introducci贸n Compartir informaci贸n en Redux

27

Par谩metros por URL

28

Compartir Reducer

29

M煤ltiples Reducers

30

Llamando a m煤ltiples reducers en una acci贸n

31

Uso del estado en la acci贸n

32

Evitar segundas b煤squedas

33

Inmutabilidad

34

Evitar sobrescritura

35

Validaci贸n compuesta

36

Validaci贸n de errores

37

Modificando respuesta de url

38

Estado con interacci贸n

39

Mostrar componentes din谩micamente

40

Llamadas asincronas din谩micas

41

Props por herencia vs estado

42

Estado compartido

M茅todos HTTP

43

Introducci贸n a m茅todos HTTP

44

Nuevo ciclo Redux

45

Normalizar datos

46

Mapear Objetos

47

Componente para agregar tarea

48

Manejar inputs con Reducer

49

POST

50

Deshabilitando bot贸n

51

Redireccionar

52

Reutilizar componentes

53

PUT

54

DELETE

55

脷ltimos detalles

Conclusi贸n

56

Conocimientos adquiridos

57

Qu茅 hacer a continuaci贸n

A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Curso de Redux por Bedu

Curso de Redux por Bedu

Rodolfo Saldivar

Rodolfo Saldivar

Redireccionar

51/57
Recursos

Aportes 16

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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!