Evitar sobrescritura

Clase 34 de 57 • Curso de Redux por Bedu

Clase anteriorSiguiente clase

Andres Leonardo Arevalo

student•

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

Leonardo Graterol

student•

Creo que es esperable por ser un ejercicio de ejemplo, para una aplicación real sería conveniente tener alguna capa de abstracción de acceso a datos que se encargue de toda esta lógica de manejo de datos que se está incluyendo incorrectamente dentro de componentes presentacionales, actions y reducers.

Carlos Rosado

student•

tenes razon el profesosr a mi criterio uso malas practicas de desarrollo empezando con el key por que podia mandar el id del usuario directamente, y otra que no es necesario llamar a todos los usuarios en las publicaciones

Diego Fernando Rojas Quintero

student•

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

Alexis Villalva

student•

Jajajaja

Daniel Cutipa

student•

para cuando se haga la actualizacion del curso me imagino que tendra que ver el curso para ver que se ha hecho en el mismo

Stiven Jiménez

student•

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

Andrés Felipe Eslava Zuluaga

student•

Completamente de acuerdo!

silvana murgo

student•

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")

Jorge Alberto Alvarez Sone

student•

Gracias, me salvaste la vida. Como estoy haciendo con el React hooks no encontraba la solución.

Pero tu solución con el hasOwnProperty me funciono de maravilla.

Saludos

Juan Camilo Angel Fandiño

student•

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

Manuel Rivera

student•

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

Oscar Miguel Fabian Bernal

student•

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

Guido Modarelli

student•

Otra forma de hacerlo:

if (!this.props.usuariosReducer.usuarios[key].postsKey) {
        getPostByUser(key);
      }

Elio De Jesus Lopez Santiago

student•

Melissa González Nebrijo

student•

Clementina

Gabriel Rodriguez

student•

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;

Ivan Andres Diaz Lopez

student•

Yo no veo ningun en riedo en el codigo:

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

Andrés Felipe Eslava Zuluaga

student•

Buen analisis!

Miguel Mamani Arotoma

student•

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!

Jaime Diaz

student•

"únicamente viendo el vídeo" la verdad no entendí a priori la pasada clase y esta, pero haciendo lo planteado en la clase directamente en el PC fue cuando comprendí el concepto y la importancia de esta técnica. Definitivamente hay que practicar, un mensaje claro para los compañeros que han llegado hasta acá pero sin el proyecto a la mano. Saludos.

Matias Niz

student•

Siendo que ese detalle no va a tener actualizaciones. Sino no te vas a enterar de las mismas hasta que salgas y vuelvas a entrar a la app.

Grace Nikole Avarado

student•

Qué buena manera de evitar peticiones innecesarias :3

Daniel Cutipa

student•

tiene sus props y contras, porque cuando regreses a usuarios, y vuelvas otra vez a los posts, no podras ver las ultimas pubicaciones, porque no se esta actualizando los posts by user

Olga Isela Ceballos Miranda

student•

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!

Enzo Tamaquiza Murillo

student•

Ese dispach es para traer los usuarios no para actualizar, si utiliza el mismo dispach para actualizar esta sobre escribiendo los datos, algo que puede causar errores en el momento o en un futuro. Ese dispacth entra en accion cuando en el STORE no hay ningun usuario, por ejemplo cuando recarga la pagina o cuando entra a la pagina por primera vez.

Edgar Isai Salgado Cortez

student•

Hola, todavia no tengo claro el por que se puede destructurar dentro del render los reducers pero no en el componentDidMount, no se supone que el estado se podria actualizar en el render tambien?

Erik Elyager

student•

En el render se puede actualizar pero en el componentDidMount el componente ya está montado.

Luis Felipe Medina Rodriguez

student•

con useEffect se borra las publicaciones_key en el ultimo log osea sale en 3 console.log en los dos primeros aparece publicaciones_key pero en el ultimo este se borra ¿que hago? :C

Ismael Grimaldo Vega

student•

¿De dónde sale ese 'publicaciones_key'?

Diego Mario Maldini Freyre

student•

"publicaciones_key" está definida en la action "traerPorUsuario" (publicacionesActions.js) y contiene el índice correspondiente al arreglo de publicaciones del usuario actual. En el arreglo "publicaciones_actualizadas" se van guardando sub-arrays con las sucesivas publicaciones que se van solicitando. El último de estos sub-arreglos (publicaciones_actualizadas.length - 1) corresponderá siempre al usuario actual.

Ismael Grimaldo Vega

student•

Ya me quedó claro, gracias!

Juan Felipe Salamanca Gonzalez

student•

Excelente como se puede aplicar todo esto y así evitar que se sobrescriban datos que deben permanecer con un único estado, ademas me gustaría saber que otras formas hay de solucionar el problema y que otras funciones puede cumplir in

YEISON ALEXANDER ARISTIZABAL AGUDELO

student•

Es raro que no haya destructurado los reducers porque no se actualizan? igual vienen del props de donde es que viene el otro props? Creo que eso es una mis concepcion al re renderizarse la clase basicamente se crea nuevamente con nuevos valores o me equivoco?

Kenneth Angulo L

student•

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

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

Evitar sobrescritura

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