Mostrar componentes dinámicamente

Todo seria mejor si el codigo fuera mas entendible 😦

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

2. llamamos al actions Creator que modifica el atributo abierto de la publicación. abrirCerrar()

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

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

}```

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

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?

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.

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

1. 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)
2. 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
          )
        }
      >
        <h4> {publication.title}
        </h4>
        {
          (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);
  }

Buena clase excelente contenido

Excelente clase. 🙂