Estado compartido

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

Willy David Da Conceicao Lozada

student•

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.
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.
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

Jhon Manuel Angulo Moncada

student•

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

IT Team

student•

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

Frank Antonio Piñin Ato

student•

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

Martin Fernandez

student•

Este curso duele hacerlo. Cúando lo actualizan?

Pablo Etcheverry

student•

Estoy de acuerdo con esto. Creo que es el que más me ha dolido :'(

Grace Nikole Avarado

student•

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

Cristian Andres Ladino Peña

student•

Excelente clase. 🙂

Luis Guilermo Figueroa Hernandez

student•

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 :)

John Carlos Espitia Rivera

student•

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

Paul Cortes

student•

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

Andrés Felipe Eslava Zuluaga

student•

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.

Hernán David Mercado Fernández

student•

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

Juan Felipe Salamanca Gonzalez

student•

El reducer es prioritario

Johan García Trejo

student•

excelente

Melissa González Nebrijo

student•

Excelente clase.

Edith Hernández Navarrete

student•

Excelente clase!

Paul Cortes

student•

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

Matias Sebastian Perez

student•

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:

Rodolfo Saldivar

teacher•

Probablemente en algún lado estamos modificando el estado de manera mutable, lo cual sobre escribe el estado actual en lugar de generar uno nuevo.

jean pierre gabriel nieto acosta

student•

lanza tu pregunta(con el codigo) por stack overflow y pasa el link para ver si logro ayudarte

David Dias

student•

Muy bien. Vamos con el siguiente modulo

Ulises Rojas González

student•

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

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

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

Estado compartido

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