Mostrar componentes dinámicamente

Clase 39 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

Frank Antonio Piñin Ato

student•

Todo seria mejor si el codigo fuera mas entendible :(

Andres Roberto Coello Goyes

student•

solo toca ver y analizar el código una y otra vez.. :(

Valentina Fernández Rada

student•

Te recomiendo no hacer todo ciegamente, sino intentar resolver los problemas por tu cuenta, de esa manera desarrollas tu propio código (que tú podrás entender) y tu conocimiento se afianza más. Puede ser más demorado pero es mayor el aprendizaje.

Willy David Da Conceicao Lozada

student•

Cada vez que hagan click llama a esta function mostrarComentarios() y recibe por parametro la casilla de donde están las publicaciones de este usuario y a cual publicación en especifico fue a la que le di click y nos llegan los comentarios
llamamos al actions Creator que modifica el atributo abierto de la publicación. abrirCerrar()
Creamos un ACTIONS traerComentarios() en publicacionesActions y en el componente lo destructuro y lo ponemos en el **mapDispatchToProps **ya nos llega por props ese actions y lo llamamos this.props.traerComentarios(pub_key, com_key);

Conclusión: Creamos una función en el componente que cuando le dan click a una publicación esta se llama y la función llama a dos actions uno que modifica el atributo abierto y otro que va a buscar los comentarios de esa publicación.

Lluis Pitarch Ripolles

student•

El curso sin duda tiene que revisarse, estoy tomando una ruta un poco alternativa, os dejo mi código del action

export const showComments = (key) => (dispatch, getState) => {

    // Get the correct post

    const { posts } = getState().postsReducer

    const arrayPostsFilter = posts.filter((post) => (post.id === key))
    let objectPost = arrayPostsFilter[0]


    // Toggle for dummies

    if(objectPost.showComments === true){
        objectPost.showComments = false
    } else{
        objectPost.showComments = true
    }
    

    // substitute object by index equal to key.id
    
    let foundIndex = posts.findIndex(post => post.id === objectPost.id);
    posts[foundIndex] = objectPost;

    dispatch({
        type: GET_POSTS,
        payload: posts,
    })

}```

horacio garcia

student•

estoy decuerdo con tigo bro, empece bien ahora estoy un poco perdido, gracias por tu aporte

Carlos Angel Muñoz Castañeda

student•

Al ver el número de aportes a la fecha de este comentario (6), me doy cuenta que muchos se han rendido o dejaron de entender el curso y solo lo terminaron por terminar. Mi duda es: ¿Redux tiene tan alto nivel de complejidad?

Julian Carelli

student•

Mira recien estoy por esta clase y no me parece tan complejo, yo creo que cuando entendes como funciona, se vuelve todo mucho mas sencillo, para mi la forma de enseñar en este curso no es la mas optima y capaz eso tira abandonar, pero se puede. Seguramente para solventar las bases de esto, hago un proyecto aparte con todo lo aprendido, es la mejor forma para lograr comprenderlo.

GEORGIE WLADIMIR DUARTE CADENAS

student•

no me imagino bajar el repo de este proyecto y tratar de entenderlo sin ver el curso

Jhean Pacheco

student•

Pienso que la validación del componente de comentarios para saber si está o no abierto debería ir en un estado propio del componente con useState y no complicarse con redux para algo sencillo.

Andrés Felipe Eslava Zuluaga

student•

En esta parte, solamente anidamos los argumentos que se están pasando a las acciones y creamos el nuevo componente de Comentarios ─

Hasta esta clase, solamente agregamos el componente de mostrar comentarios. Este componente va a ejecutar la función de abrir y cerrar (actualizar la publicación cómo vimos la clase pasada en isOpen)
Crear el componente que va a recibir los comentarios y mostrarlos.

showPublicationsInfo = (userPublications, userPublicationsKey) => {
    return userPublications.map((publication, publicationCommentsKey) => (
      <div
        key={`${publication.userId}_${publication.id}`}
        className="publications_body"
        onClick={
          () => this.showComments(
            userPublicationsKey, 
            publicationCommentsKey, 
            publication.comments
          )
        }
      >
        <h5> {publication.title}
        </h5>
        {
          (publication.isOpen)
            ? <div>
              <p>{publication.body}</p>
              <Comments />
            </div>
            : <span>Abrir</span>
        }
      </div>
    ));
  };

  showComments = (userPublicationsKey, publicationCommentsKey, comments) => {
    this.props.openAndClosePublications(userPublicationsKey, publicationCommentsKey);
    this.props.getComments(userPublicationsKey, publicationCommentsKey);
  }

Cristian Andres Ladino Peña

student•

Excelente clase. 🙂

Paul Cortes

student•

Buena clase excelente contenido

Gustavo Medina Limon

student•

Cada vez que avanzo una clase, me doy cuenta que muchos desistieron. No se mucho de redux, pero pienso que el curso se volvió muy complejo, muy extenso y difícil de manejar.

export const showComments = (key) => (dispatch, getState) => {

    // Get the correct post

    const { posts } = getState().postsReducer

    const arrayPostsFilter = posts.filter((post) => (post.id === key))
    let objectPost = arrayPostsFilter[0]


    // Toggle for dummies

    if(objectPost.showComments === true){
        objectPost.showComments = false
    } else{
        objectPost.showComments = true
    }
    

    // substitute object by index equal to key.id
    
    let foundIndex = posts.findIndex(post => post.id === objectPost.id);
    posts[foundIndex] = objectPost;

    dispatch({
        type: GET_POSTS,
        payload: posts,
    })

}```

showPublicationsInfo = (userPublications, userPublicationsKey) => {
    return userPublications.map((publication, publicationCommentsKey) => (
      <div
        key={`${publication.userId}_${publication.id}`}
        className="publications_body"
        onClick={
          () => this.showComments(
            userPublicationsKey, 
            publicationCommentsKey, 
            publication.comments
          )
        }
      >
        <h5> {publication.title}
        </h5>
        {
          (publication.isOpen)
            ? <div>
              <p>{publication.body}</p>
              <Comments />
            </div>
            : <span>Abrir</span>
        }
      </div>
    ));
  };

  showComments = (userPublicationsKey, publicationCommentsKey, comments) => {
    this.props.openAndClosePublications(userPublicationsKey, publicationCommentsKey);
    this.props.getComments(userPublicationsKey, publicationCommentsKey);
  }

Mostrar componentes dinámicamente

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