woow este curso se debe actualizar de forma más concisa y con código más legible.
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
Estado con interacción
Mostrar componentes dinámicamente
Llamadas asincronas dinámicas
Props por herencia vs estado
Estado compartido
Métodos HTTP
Introducción a métodos HTTP
Nuevo ciclo Redux
Normalizar datos
Mapear Objetos
Componente para agregar tarea
Manejar inputs con Reducer
POST
Deshabilitando botón
Redireccionar
Reutilizar componentes
PUT
DELETE
Últimos detalles
Conclusión
Conocimientos adquiridos
Qué hacer a continuación
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 26
Preguntas 2
woow este curso se debe actualizar de forma más concisa y con código más legible.
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.
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.
·
·
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>
));
};
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á:
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]];
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.