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

Mostrar componentes dinámicamente

39/57
Recursos

Aportes 9

Preguntas 0

Ordenar por:

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

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