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

Modificando respuesta de url

37/57
Recursos

Aportes 13

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

  1. Creo una variable que ser谩 un arreglo de objetos con todo lo que me trae respuesta.data y le agrego a cada publicaci贸n dos atributos mas. Y las mando al arreglo de publicaciones_actualizadas (ese arreglo tiene las publicaciones)

  2. Publicaciones/index.js creo un funci贸n llamada mostrarInfo() que es lo que va a retornar ponerPublicaciones() Es una funci贸n que retorna todas las publicaciones del usuario en especifico (recibimos por par谩metro todas las publicaciones que le corresponden a este usuario y la casilla de donde est谩n las publicaciones de este usuario)

  3. Creamos un **actionsCreator **en PublicacionesActions que cuando le den click al div llame al actions, que recibe por par谩metro 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 (sacamos el 铆ndice de la publicaci贸n del map)

Conclusi贸n: a cada publicaci贸n le agrego dos atributos, despu茅s creo una funci贸n en Publicaciones/index.js llamada mostrarInfo() y Creamos un actionsCreator en PublicacionesActions que cuando le den click al div llame al actions y este recibe por par谩metro 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

El contenido esta excelente pero creo que el c贸digo se torna bastante confuso, siendo react se pudo estructurar de una manera mas declarativa y son detalles pero hasta el nombrado de las variables como pub_key, com_key, lo entiendes ahora pero si se lo entregas a otro programador no sabr谩 de que tratan esto o incluso tu mismo si lo ves en unos meses despu茅s

Si llegaste hasta aqu铆 y crees que esto ya es codigo espagueti, proponte optimizarlo al final del curso en vez de quejarte (A menos de que ya lo este haciendo), porque afuera hay proyectos mucho mas enredados que este (Porque este esta tranqui ) que posiblemente vas a tener que optimizar 馃槈

No se si alterar la respuesta y formar otra estructura de datos como agregarle campos, sea buena pr谩ctica. En una aplicaci贸n real esto ser铆a un quiebre de cabeza para su mantenimiento, si solo alguien remueve esa propiedad porque no sabia que se agrego, romperia el funcionamiento, ya que se esta utilizando hasta para validar, que, se renderiza. Creo que se debe formar contratos como las interfaces de TypeScript, porque dejarlas estas alteraciones por ahi causar铆a problemas.

Se enreda mas el c贸digo pero seguimos

Aun no se arregla el problema,
por ejemplo estoy en las publicaciones todo normal, pero si regreso a usuarios y quiero ver otras publicaciones de otros usuarios me sale un error, pero si recargo la pagina sale todo normal.

驴Por qu茅 se hizo ese cambio en el c贸digo, qu茅 se busca mostrar?

  1. Queremos hacer que el store maneje el estado de las publicaciones. Esto quiere decir que dentro del store global vamos a tener las publicaciones (t铆tulo y p谩rrafo) para ser mostradas din谩micamente,
  2. lo que tambi茅n expresa que el onClick va a traer 煤nicamente el comentario por t铆tulo.


El profesor cambia la estructura del 膰odigo para hacer lo siguente:

  • ponerPublicaciones: va traer el estado del store y por medio de la funci贸n mostrarInformacion va a pasar publicaciones & publicacionesKey (que son las publicaciones actualizadas).
setPublications = () => {
    const {
      usersReducer,
      publicationsReducer,
      usersReducer: { users },
      publicationsReducer: { publications },
      match: { params: { key } }
    } = this.props;
    // Se revisa info del usuario
    if (!users.length) return; // la informaci贸n del usuario no existe
    if (usersReducer.error) return; // la informaci贸n del usuario tiene error
    // Se revisa info de las publicaciones
    if (publicationsReducer.loading) // info publicaciones cargando
      return <Spinner />;
    if (publicationsReducer.error) // la informaci贸n de publicaciones tiene error
      return <Fatal message={publicationsReducer.error} />;
    // Se revisan que las publicaciones se encuentren
    if (!publications.length) return; // la informaci贸n de publicaciones no existe
    if (!('publicationsKey' in users[key])) return;  // la informaci贸n de publicaciones por user no existe

    const { publicationsKey } = users[key];

    return this.showInformation(
      publications[publicationsKey],
      publicationsKey,
    );
  }

// **ponerPublicaciones** realiza las validaciones de que por usuario exista publicaciones, si existe, le va a pasar esa informaci贸n a otra funci贸n que se haga cargo de mostrar lo que ya se trajo del **store**: mostrarInformacion()
  • mostrarInformacion: va a recibir las publicaciones & publicacionesKey para que por medio del onClick se muestren din谩micamente una por una.
showInformation = (publications, publicationsKey) => {

    return publications.map((publication, commentKey) => (
      <div
        key={`${publication.userId}_${publication.id}`}
        className="publications_body"
        onClick={() => this.props.openAndClosePublications(publicationsKey, commentKey)}
      >
        <h4> {publication.title}
        </h4>
        <span>{publication.body}</span>
      </div>
    ));
  };
  • openAndClosePublications: En las acciones de publicaciones, definimos una funci贸n (action) para cuando ocurra ese onClick() de mostrarInformacion. Esto lo que har谩 es anunciar si la publicaci贸n seleccionada fue clickeada, para enviar 煤nicamente esa informaci贸n (que hasta ahora estamos mostrando con un console.log). Esta acci贸n nos anuncia si la publicaci贸n seleccionada deber铆a estar abierta (trayendo y viendo comentarios) o cerrada (solo viendo el t铆tulo de la publicaci贸n).
export const openAndClosePublications = (publicationsKey, commentKey) => {
  return async (dispatch) => {
    console.log(publicationsKey, commentKey);
  };
};

Excelente clase. 馃檪 Que mont贸n de cosas las que se necesitan para lograr ese resultado relativamente peque帽o jeje.

Muy bien por toda esta informaci贸n paso a paso

Buena explicacion

Por el momento lo hice en una funci贸n del componente

  handleOnclick = (PublicationsIndex, CommentsIndex) => {
    return console.log(PublicationsIndex, CommentsIndex);```

huy huy pero esto cada vez se pone mas complejo y lo mejor es que se entiende

Se puso muy enredado el c贸digo, si fuera un proyecto real y se lo pasamos a otro dev as铆 como est谩 le agarra una garrotera, pero bueno