Estado con interacción

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

Nery Alberto Cano Ortigoza

student•

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

Carlos Miguel Orozco Vidaña

student•

creo que si esta actualizado es el siguiente en la carrera el de Curso de React Router y Redux que esta dado por Oscar Barajas, aun no lo tomo pero checando los temas ambos cursos tocan casi lo mismo

Aitor Santana Cabrera

student•

Yo pienso igual, se debe actualizar algunas partes del curso. Sobretodo quitando algunas clases de relleno y mejorar la legibilidad del código.

Willy David Da Conceicao Lozada

student•

UFFFF PERO QUE CLASE MUCHO ROYO

En el componente hacemos un condicional que dice si el atributo abierto de la publicación es cierto retorna abierto caso contrario es cerrado.
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.
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.
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.

horacio garcia

student•

hahah bro sin vos me pierdo aca en esta vaina, pero esta genial.

Luis Mora

student•

Tus comentarios ayudan a comprender mejor la clase, muchas gracias!

Rene Ismael Barrios Rojas

student•

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.

Daniel Alberto Esquinazi

student•

Buenas, estoy de acuerdo con lo que comentas. Cree este tutorial para aplicar useDispatch y useSelector, espero sirva para clarificar algunos conceptos. Lamentablemente se subio con un formato equivocado pero legible.

https://platzi.com/tutoriales/1613-redux/4701-manejo-de-estado-con-redux-usando-react-hooks/

Carlos Huarcaya

student•

Es un curso de redux, no de react ... bien pudo usar Vuejs o angular. Lo que hace el profesor es dar buenas practicas para el uso de redux, ya que cubrio todos los puntos que se necesitan para usar REDUX (no react).

Iván Darío Sánchez Jiménez

student•

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

Brayan Mateo Montañez Baron

student•

concuerdo

Andres Roberto Coello Goyes

student•

Ahi estoy arto

Johan García Trejo

student•

Esto se es complicando

Ehitel Rodríguez Castro

student•

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

Mariana Valencia Gallego

student•

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))
    ]```

Alberto Cantillo

student•

la verdad me he perdido varias veces

Frank Antonio Piñin Ato

student•

jaajaj alv cada dia pienso que este lenguaje es mas dificil

Edwin Baeza

student•

Desde mi punto de vista, no es lenguaje es el profesor.

Nery Alberto Cano Ortigoza

student•

a mi parecer el problema es el profesor, que da demasiadas vueltas para explicar y termina confundiendo.

Valentina Fernández Rada

student•

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

Carlos Javier Bazan Huaman

student•

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.

Vsqz Gabriel

student•

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

Byron Mesias Cueva Cabrera

student•

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.

Wandy Rafael Santana Evangelista

student•

Hola @byron7cueva -El profesor no creo que este usando buenas practicas para esto; pero yo he estado haciendo desde el principio este proyecto por mi propia cuenta y utilizando lo que para mi son buenas practicas; puedes checar mi repositorio si asi lo deseas: ClickAqui Recuerda, #NuncaParesDeAprender 💚

Andrés Felipe Eslava Zuluaga

student•

Ve realizando en paralelo tú código con buenas práticas. No te quedes con lo que da el profesor. Redux es complejo de entender al inicio, pero que eso no impida nada de tu aprendizaje. Realiza las cosas despacio

Melissa González Nebrijo

student•

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

softdynamic sac

student•

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

Ivan Andres Diaz Lopez

student•

linea 66 del codigo del profesor

segun entiendo, publicaciones_actualizadas y publicaciones son lo mismo. ¿Porque se utiliza el operador de propagacion?

Andrés Felipe Eslava Zuluaga

student•

Porque publicaciones y pub_key son dos arreglos diferentes. ·

Acá, definimos las publicacionesActualizadas. Estas van a ser todas las que se seleccionen al momento de hacer click en una publicación. De primero, debemos seleccionar todas las publicaciones.

const publicationsUpdated = [...publications];

A continuación, de todas las publicaciones, ubicamos la posición de la publicación que seleccionamos y guardamos solo esa publicación en la variable creada.

publicationsUpdated[publicationsKey] = [
  ...publications[publicationsKey],
]

Ahora, debemos recordar que los comentarios de cada publicación ahora van a encontrarse dentro de un arreglo que está dentro de dicha publicación. Entonces, en la que dimos click, la publicación seleccionada (publicationsKey) que tiene el arreglo comentarios (commentsKey), vamos a guardar la referencia de la publicación seleccionada y una variable que indica si está abierto o cerrado la publicación. Esto con el fin de ver los comentarios de forma dinámica.

publicationsUpdated[publicationsKey][commentsKey] = updatePublication;

// más arriba en el código
const { publications } = getState().publicationsReducer;
const publicationSelected = publications[publicationsKey][commentsKey];
const updatePublication = {
  ...publicationSelected,
  isOpen: !publicationSelected.isOpen
};

Arnoldo Ricardo HR

student•

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

Alonso Alejandro Zúñiga Beltrán

student•

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

Claudio Igor Camejo Abreu

student•

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?

Andrés Felipe Eslava Zuluaga

student•

Hace dos años era así. ─> mira esto Pero la cosa es que JS permite que tú mismo realices el flujo de los datos inmutable (mírate todo lo que es destructurar objetos / arreglos) y la arq. Flux permite manejar los datos así.

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))
    ]```

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

publicationsUpdated[publicationsKey][commentsKey] = updatePublication;

// más arriba en el código
const { publications } = getState().publicationsReducer;
const publicationSelected = publications[publicationsKey][commentsKey];
const updatePublication = {
  ...publicationSelected,
  isOpen: !publicationSelected.isOpen
};

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

Estado con interacción

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