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

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Redux por Bedu

Curso de Redux por Bedu

Rodolfo Saldivar

Rodolfo Saldivar

Estado con interacción

38/57
Recursos

Aportes 26

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

woow este curso se debe actualizar de forma más concisa y con código más legible.

UFFFF PERO QUE CLASE MUCHO ROYO

  1. En el componente hacemos un condicional que dice si el atributo abierto de la publicación es cierto retorna abierto caso contrario es cerrado.

  2. En el abrirCerrarActions, selecciono a la publicación que le di click y la guardo en const, y hago otra const que va a tener esa publicación que le di click y modifica la propiedad de abierto por el contrario que tiene !seleccionada.abierto.

  3. Guardamos en constante a todas las publicaciones de todos los usuarios, seleccionamos de todas las publicaciones la que le corresponden al usuario y desplegamos desplegamos todas las publicaciones de este usuario y por ultimo de todas las publicaciones del usuario, selecciono a la que se le dio click y sera igual a la publicacion pero con el abierto cambiado.

  4. Hago un **dispatch **mandando el arreglo con todas las publicaciones de los usuarios al PublicacionesReducer, pero a la publicación que se le dio click será igual a la publicación pero con el atributo abierto cambiado.

Conclusion: al PublicacionesReducer le mando un arreglo con todas las publicaciones de los usuarios, pero a la publicación que se le dio click será igual a la publicación pero con el atributo abierto cambiado.

Sin animo de ofender, viéndolo desde el 18 de noviembre 2019 este curso pienso que se debe actualizar con los hooks useDispatch, useSelector, además de que personalmente hay cosas que no me gustaron, creo que se perdió el orden, muchas validación sobre un componente que no hace un código muy legible, además la explicación es rápida asumiendo que se sabe ya bien de dónde sale todo, el profesor es bueno, pero le falta orden para ser un curso profesional, la verdad.

De todo este ejercicio solo siento que es innecesario en publicacionesActions.js la línea

publicaciones_actualizadas[pub_key] = [...publicaciones[pub_key]];

Me parece que es redundante, pues si miramos este fragmento de código

const publicaciones_actualizadas = [...publicaciones];
publicaciones_actualizadas[pub_key] = [...publicaciones[pub_key]];
publicaciones_actualizadas[pub_key][com_key] = actualizada;

ya lo que había en publicaciones se desestructuró en publicaciones_actualizadas y la linea que indico lo que hace es reescribir la publicación con la misma información. Comenté en mi código dicha línea y todo sigue funcionando

Logré lo mismo pero de esta manera que para mí es más entendible:

const publicaciones_actualizadas = [
        ...publicaciones.slice(0, pub_key),
        ...[
            [
            ...publicaciones[pub_key].slice(0, com_key),
            ...[
                {
                  ...publicaciones[pub_key][com_key],
                  abierto: !publicaciones[pub_key][com_key].abierto
                },
            ...publicaciones[pub_key].slice((com_key + 1))
            ]
           ]
        ],
        ...publicaciones.slice((pub_key + 1))
    ]```

la verdad me he perdido varias veces

jaajaj alv cada dia pienso que este lenguaje es mas dificil


Ahi estoy arto

Muy buena la clase, aunque me parece muchísima programación para resultados tan sencillos.

Esto se es complicando

Creo que como lo hice es más legible:
(Los posts y usuarios están por id)

 export const openClose = post => async (dispatch, getState) => {
  const { posts: currentPosts } = getState().postsReducer;
  const userPosts = currentPosts.filter(p => post.userId == p.userId)[0];
  const postsUserIndex = currentPosts.findIndex(p => post.userId == p.userId);
  const postIndex = userPosts.posts.findIndex(p => p.id == post.id);

  // Actualizo estado del post seleccionado
  userPosts.posts[postIndex] = {
    ...post,
    open: !post.open
  };

  let updatedPosts = currentPosts;
  updatedPosts[postsUserIndex] = userPosts;

  // se actualizan los posts
  dispatch({
    type: postsTypes.UPDATE_POSTS,
    payload: updatedPosts
  });
};

Hace 3 videos deje seguirle con el codigo, creo que la parte de redux-reactjs se vio poco y mas codigo de relleno que no se aprovecha por el desorden.

Sin dolor no hay conocimiento jeje , a seguir dándole vuamoosss :v

No se si la complejidad que el profesor le pone al código que realiza es normal en una aplicacion con Redux. Cada que cambia el type es como que “bueno no me gusta como se llama cambiemos” eso hace perder el sentido del flujo de la aplicación. Se ve que va salir inmantenible este ejemplo, quien lo va entender?, solo el que la hizo en principio.

Sí que tocó que pensar esta clase, me tocó tomarme un tiempo para poder entenderlo todo. muy buena información

Wao! se enredó todo, no creo que eso sea legible.

por si prefieres buscar por id del usuario y no por key del array

export const openClose = (user_id, post_id) => (dispatch, getState) => {
    const { publicaciones } = getState().publicacionReducer;

    const new_posts = { ...publicaciones };
    new_posts[user_id] = publicaciones[user_id].map((post) => {
        if (post.id === post_id) {
            return { ...post, abierto: !post.abierto };
        }
        return post;
    });

    dispatch({
        type: TRAER_POR_USUARIO,
        payload: new_posts,
    });
};

A estas alturas me está comenzando a resultar muy difícil de seguir el curso, al principio pensé que tanto codigo spaguetti y code smells eran para ir guiando a los usuarios de las malas prácticas y cómo corregirlas, espero así sea mas adelante. Pensé que podía ser el único pero ya veo que no. Con la creciente popularidad de React creo muy importante este curso, pero bien enseñado. Analicen por favor volverlo a realizar. Lo terminaré porque ocupo aprender esto por cuestiones laborales, pero por favor hagan algo al respecto

Yo tengo una duda con respecto a la inmutabiliad (igual capaz el lugar no es este video, pero es una duda que tengo desde hace algunos videos), en los actions porque no utilizar Immutable.js como recomiendan en la propia documentación de redux?

talvez algunos se pregunten porque no hace la asignacion directa de

publicaciones_actualizadas[pub_key] = [...publicaciones[pub_key]]

a

publicaciones_actualizadas[pub_key] = publicaciones[pub_key]

la respuesta es sencilla, porque javascript en objetos se hace la transferencia por referencia y no por valor, por valor es en los casos primitivos como strings, enteros boleanos

Excelente clase. A seguir aprendiendo y practicando. 🙂

En este punto, aun sigo pensando si seguir con el curso o dejarlo.

La verdad no me convence y siento que no estoy comprendiendo redux, quiero adquirir conocimiento de redux con buenas practicas y pues este curso desde el principio me lleva con un codigo caotico

En este punto cambié el nombre de variables para que sea más entendible el código. Dejo comentarios para quiénes quizá se sintieron perdidos.
·

Primero, recuerda que todo comienza desde la vista, así es más entendible el código:

·

Cuando al div de la entrada le das click, estás seleccionando una publicación que va a ser actualizada.
Esa publicación userPublicationsKey se encuentra dentro las publicaciones del usuario userPublications.
Se va a ejecutar un evento que desencadena la acción de abrir / cerrar publicación.
En mi caso, para que sea más dinámico, con un operador ternario muestro la opción de abrir. Y, cuando está abierto, muestro el cuerpo de la publicación y una opción de cerrar

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

·
Segundo, la acción es la encargada de ejecutar la actualización de la publicación cuando diste click. Hasta ahora, tu objetivo es solo actualizar si está abierto o cerrado el div que seleccionaste.

Entonces, la acción está recibiendo las publicaciones del user seleccionado y la publicación a la que diste click:
De esas publicaciones, le diste click a una entrada y ahora se debe actualizar la entrada para saber si debe abrir ó cerrar y ver sus comentarios.
·

export const openAndClosePublications = (userPublicationsKey, publicationCommentsKey) => {
  return async (dispatch, getState) => {
    const { publications } = getState().publicationsReducer;
    const publicationSelected = publications[userPublicationsKey][publicationCommentsKey];
    const publicationSelectedUpdated = {
      ...publicationSelected,
      isOpen: !publicationSelected.isOpen
    };

    const publicationsUpdated = [...publications];
    publicationsUpdated[userPublicationsKey] = [
      ...publications[userPublicationsKey],
    ]
    publicationsUpdated[userPublicationsKey][publicationCommentsKey] = publicationSelectedUpdated;

    dispatch({
      type: GET_PUBLICATIONS_BY_USER,
      payload: publicationsUpdated
    });
  };
};

La acción está:

  1. Recibiendo todas las publicaciones. De esas publicaciones, las del usuario seleccionado previamente.
  2. De las publicaciones del usuario, está recibiendo la publicación (entrada) a la que se dio click para abrir,
  3. Actualiza estado de la publicación para que isOpen cambie.
const { publications } = getState().publicationsReducer;
    // extraigo la publicación seleccionada del arreglo de publicaciones
    const publicationSelected = publications[userPublicationsKey][publicationCommentsKey];
    const publicationSelectedUpdated = {
      ...publicationSelected,
      isOpen: !publicationSelected.isOpen
    };

Cuando cambia, se debe actualizar la publicación del usuario seleccionada, es por eso que debemos
4. seleccionar todas publicaciones, y en cada publicación del usuario publicationsUpdated[userPublicationsKey][publicationCommentsKey], agregar la publicación seleccionada actualizada publicationSelectedUpdated

// Defino una variable para actualizar las publicaciones y  las actualizo mediante voy dando click en la que seleccione para abrir / cerrar
    const publicationsUpdated = [...publications];
// En las publicaciones, voy a seleccionar las del user
    publicationsUpdated[userPublicationsKey] = [
      ...publications[userPublicationsKey],
    ]
// Actualizo la publicación que seleccioné para abrir / cerrar agregando la publicación seleccionada actualizada en el key de la entrada seleccionada, que corresponde al div que se abrirá para ver los comentarios
    publicationsUpdated[userPublicationsKey][publicationCommentsKey] = publicationSelectedUpdated;

creo que esta mal la secuencia del curso, por que a que hora se hizo todo lo de las publicaciones??

Excelente clase!!

Esta línea no es innecesaria?

publicaciones_actualizadas[pub_key] = [...publicaciones[pub_key]];