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

Evitar sobrescritura

34/57
Recursos

Aportes 33

Preguntas 6

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

No se si se pueda decir que se armo un desastre de codigo, corrijanme si estoy equivocado 😉

👋Hola chicos, no sé si solamente tengo esta urgencia en mi alma y no puedo contener lo que voy a escribir: Desde el principio solo Dios y yo sabíamos el código, ahora solamente Dios lo sabe.

me encanta este curso por que ademas de redux es un repaso muy grande de react y de javascript

se aprende algo nuevo en todas las clases

Si alguien viene del curso de javacript profesional de Richard seguro le va a sonar hasOwnProperty para buscar si un objeto contiene una propiedad 😃

!this.props.userReducer.users[key].hasOwnProperty("postsKey")

Qué tal de esta manera?

//find user
const user = this.props.usersReducer.users.filter(u => u.id === parseInt(id)).shift()
if (!user.posts) {
      this.props.getPostsByUser(id)
}```

Para los que lo están manejando con id

class publications extends React.Component {
  async componentDidMount() {
    const {
      UsersReducer: { Data },
      Add_AllsPublicationsByUser,
      Add_AllsUsers,
      match: {
        params: { Id }
      }
    } = this.props;

    if (!Data.length) {
      await Add_AllsUsers();
    }

    const UserIndex = this.props.UsersReducer.Data.findIndex(user => {
      return user.id === parseInt(Id);
    });

    if (this.props.UsersReducer.Error) {
      return;
    }

    if (!("PublicationsIndex" in this.props.UsersReducer.Data[UserIndex]))
      Add_AllsPublicationsByUser(Id);
  }

  render() {
    if (this.props.UsersReducer.Error || this.props.PublicationsReducer.Error) {
      return (
        <Error
          error={
            this.props.UsersReducer.Error ||
            this.props.PublicationsReducer.Error
          }
        />
      );
    }
    if (
      !this.props.UsersReducer.Data.length ||
      this.props.UsersReducer.Loading ||
      this.props.PublicationsReducer.Loading
    ) {
      return <Loading />;
    }

    const User = this.props.UsersReducer.Data.find(user => {
      return user.id === parseInt(this.props.match.params.Id);
    });
    return (
      <div>
        <h1>Publications´s {User.name} </h1>
      </div>
    );
  }
}

Genial aplicacion del operador in, no lo conocia y antes que lo hagas justo me preguntaba como iba a hacer esa solucion

Clementina

De esta forma queda mejor presentado.
Si están usando clases le añanden this al principio y listo.

const usuarios = props.usuariosReducer.usuarios;
const key = props.match.params.key;

Yo no veo ningun en riedo en el codigo:

  1. Recordemos que decidimos agrupar en un array cada publicacion, CADA VEZ que hagamos una solicitud al API.

    2.Ahora agregamos un atributo (publicaciones_key) al Usuario CADA VEZ que solicitemos la publicacion un usuario.
  2. Obviamente, CADA VEZ que entremos a ver las publicaciones de un usuario va a solicitar sus publicaciones, sin importar QUE YA LAS HABIAMOS SOLICITADO ANTES. entonces se repite el Codigo.

para que no se repita, y no vuelva a pedir publicaciones que ya habiamos solicitado. utilizamos el siguiente codigo:


Ahora ya no se repite.

luego se hacen cosas opcionales, como desestructurar datos y agregar componentes de Spinner y Fatal.

Esta y la anterior clase se complementan, ahora me pongo a pensar en las cantidades de peticiones que nos podemos ahorrar cada vez que queremos ver el detalle de algún registro. Excelente!

Qué buena manera de evitar peticiones innecesarias :3

Compañeros les agradecería si me aclararan una duda, sé que se creó este dispatch para mandar actualizar pero no entiendo en qué momento se reflejan los usuarios actualizados o cómo está funcionando Gracias!

Fue necesario repetir 10 clases atras y ver esta dos veces mas. Para poder entender que fue lo que se hizo.

Ahora si ya quedo claro como fue el flujo de datos y cual fue el problema de sobreescritura en el arreglo de publicaciones.

Consejo: Poner comentarios en cada linea de codigo. Y no borrar los cambios es mejor comentarlos para entender porque se hizo algo

Por medio de validaciones estamos controlando fallos y generando una mejor experiencia al usuario:

  • Si una persona llega a generar un error en el flujo de obtención de publicaciones, estamos realizando muy buena práctica en preguntar cada cosa cómo la obtenemos.
  • En este caso primero obtenemos los usuarios, luego las publicaciones relacionadas a ese usuario.
  • Almancenamos dentro del objeto de cada usuario un rastro de que anteriormente se visitó esa información para mostrar su nombre.
  • Detrás de esto validamos cada paso que hacemos para no sobreescribir la información, sino ir almacenando cada objeto de manera ordenada.

Esto nos permite generar un flujo controlado de la información. Sin dañar nada y ofreciendo buen UX.

Excelente clase

los reducers no siempre pueden destructurarse porque es el estado y se actualiza, pero el componentDidMount se ejecuta una vez despues del render

puros errores con este chavo

se puede usar el hook useParams() para evitar escribir this.props.match.params.

Seria

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

class Publicaciones extends Component {
	async componentDidMount() {
		...
	if (!('publicaciones_key' in this.props.usuariosReducer.usuarios[useParams().key])) {
		...

buena clase pero porque me sigue saliendo ese numero

Excelente clase

Excelente

Excelente clase. 🙂

Excelente clase

EL caso donde si se puede destructurar un objeto porque hace parte del render

Esto no seria incorrecto debido a que si se actualiza una publicacion, pero tiene el mismo id, tendriamos en el state 2 publicaciones con mismo id?

Buenas, alguien tuvo este problema?
Gracias saludos!

Este curso parece ser mas redux y una gran introducción a JS y React. Fue poco el contenido real de redux

Hola Devs:
-Les tengo soluciones mas simples y facil de mantener en mi repositorio del proyecto, espero y le sean de ayuda.
Click Aqui
Recuerden, #NuncaParesDeAprender 💚

Por sii a alguien se le seguía sumando el publicaciones_key, yo lo solucioné así:

    const postsKey = actualPosts.length -- -1;
    const actualUsers = [...users];
    actualUsers[key] = {
      ...users[key],
      postsKey
    }

Un excelente repaso de react y javascript

u. yo utilice el hasOwnProperty jeje otra forma de hacerlo

useEffect(() => {
	if (!usuarios[id - 1].hasOwnProperty('publicaciones_id')) {
			dispatch(getDatosPublicaciones(id));
		}	
}, [id, usuarios, dispatch]);```