Estado compartido

1. En el componente Comentarios cambiamos los condicionales si com_cargando es true y que no exista ningún comentario muestra el spinner y si hay un error muestra el error.
2. En el reducer de publicaciones creamos un nuevo caso llamado
   COM_ACTUALIZAR que retorna las publicaciones solo que el
   com_cargando y com_error seteados a false.
3. En el actions de traerComentarios() al hacer los dispatch los hacemos a los casos de COM_CARGANDO y COM_ACTUALIZAR.

Conclusión: me muestra el loader cuando busca los comentarios de una publicación y error cuando no se pudo completar la petición, todo creando un nuevo caso en el reducer de publicaciones para solo actualizar los comentarios.

Adicional manejo si esa publicacion no tiene comentarios lo manejo y pinto por pantalla

en el vídeo no vi cuando el profesor puso el key={ comentario.id }

pos si tienen un error en la consola es posivle que necesiten agregar la siguiente linea en Comentarios.js

const ponerComentarios = () => (
        props.comentarios.map((comentario) => (
            <li key={comentario.id}>
                <b>
                    <u>
                        {comentario.email}
                    </u>
                </b>
                <br />
                {comentario.body}
            </li>
        ))
    )

Es sensación mía o ha complicado el programa mas de lo que uno haría realmente en producción?

si se envia una propiedad que esta en el reducer pero con parametros,
siempre respetara el del reducer.

Este curso duele hacerlo. Cúando lo actualizan?

Si mandas algo por parámetro y por Reducer, al que hará caso es al Reducer, ya que el Reducer tiene más peso.

Excelente clase. 🙂

solo un detalle, el error y el cargando de los comentarios es general para todos, si falla uno los otros también. Es un reto interesante solucionar eso 😃

Este es mi avance 😄 : https://github.com/johnksft/react-redux-blog

Se ignora los parámetros en un componente cuando se envia tambien los mismos parametros por el reducer, el reducer tiene más peso

El módulo estuvo excelente.
Fue pesado porque es el inicio para entender Redux. Es normal que los compañeros y compañeras se sientan perdidos a lo largo del camino. Sin embargo y pasándome lo mismo, lo mejor es volver a hacerlo con mucha calma.
Utilicen console.log para que puedan entender cómo es el flujo de los datos.
Recuerden estar pensando en una arquitectura Flux.
Por otro lado, el profesor tuvo muchos errores en cuanto a nombrar variables, pues hizo perderme varias veces. Lo que decidí hacer fue comenzar de nuevo con nombres de variables que tengan legibilidad y entendimiento.

En mi caso preferí trabajarlo de esta forma , me parece más corta y legible.

import {
  TRAER_POR_USUARIO,
  CARGANDO,
  ERROR,
  COM_CARGANDO,
  COM_ERROR,
} from "../types/publicacionesTypes";

const INITIAL_STATE = {
  publicaciones: [],
  cargando: false,
  error: "",
  com_cargando: false,
  com_error: "",
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case TRAER_POR_USUARIO:
      return {
        ...state,
        publicaciones: action.payload,
        cargando: false,
        error: "",
        com_cargando: false,
        com_error: "",
      };
    case CARGANDO:
      return { ...state, cargando: true };
    case ERROR:
      return { ...state, error: action.payload, cargando: false };
    case COM_CARGANDO:
      return { ...state, com_cargando: true };
    case COM_ERROR:
      return { ...state, com_error: action.payload, com_cargando: false };
    default:
      return state;
  }
};

El reducer es prioritario

excelente

Excelente clase.

Excelente clase!

Excelente clase, y nos hace caer en cuenta de los errores que pueden llegar a ocurrir que no son ni de sintaxis ni de crash de la aplicación, sino de datos erróneos

Tengo un problema muy extraño que descubri de casualidad, me gustaria saber si alguen entiende porque sucede:

case COMENTARIOS_ACTUALIZAR:
	return {
      ...state,
      comentariosState:{
      	...state.comentariosState,
      	loading: false
      }
	}

Como ven cree el caso en el reducer para cuando llega la accion “COMENTARIOS_ACTUALIZAR” Pero si prestan atencion solo cambio el estado de “comentariosState”, no actualizo las publicaciones lo cual agregaria la publicacion actualizada con los comentarios que envio a travez del action.payload y aun asi funcionaba, trayendome todos los comentarios de la publicacion seleccionada. Me parecio raro asi que para probar elimine el payload del action, por lo cual, por mas que yo agrege esa linea que actualiza las publicaciones nunca va a ser capaz de acutualizarse, dejando el dispatch de ‘traerComentarios’ de la siguiente forma:

dispatch({
   type: COMENTARIOS_ACTUALIZAR,
});

Lo raro de todo esto es que la app anda… Mi sospecha es que en algun lado de traerComentarios estoy modificando el state sin darme cuenta, lo malo es que no se donde es… Les dejo una screen de toda mi funcion **traerComentarios **a ver si lo pueden resolver:

Muy bien. Vamos con el siguiente modulo

Por si les interesa hacer la regla css más corta:
.

li {
	margin: 15px 0 15px 0;
}

puede quedar abreviado como:

li {
	margin: 15px 0;
}

Incluso pueden usar hooks en vez de usar connect
https://react-redux.js.org/api/hooks

Excelente clase

programar un arte