Props por herencia vs estado

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

Ivan Santiago

student•

Decidí agregar un poco de estilos, me quedó algo así 🤔

Augusto Gonzalez

student•

Wow eso si es aplicar estilos.

Juan Jose Vega

student•

Nice, puedes compartir el código.

Paul Cortes

student•

Super genial, practique por mi propia cuenta en organizarlo y lo logre facilmente

Frank Antonio Piñin Ato

student•

Por ahora todo corre muy bien

Melissa González Nebrijo

student•

A mi no me muestra quién hace el comentario y qué escribe... y lo he revisado ya varias veces.

Juan Felipe Salamanca Gonzalez

student•

Melissa puedes mandar tu codigo por favor?

Melissa González Nebrijo

student•

Ya lo he solucionado, muchas gracias.

Edith Hernández Navarrete

student•

Buena clase!

YEISON ALEXANDER ARISTIZABAL AGUDELO

student•

Visual code ya hace todos esos imports automaticos, es super practico para no tener que memorizar las ubicaciones o nombres de las librerias

Andrés Felipe Eslava Zuluaga

student•

Al momento, va corriendo todo bien. Dejo el codigo para quien lo pueda usar:

// types
export const GET_PUBLICATIONS_BY_USER = 'get_publications_by_user';
export const LOADING_PUBLICATIONS = 'loading_publications';
export const ERROR_PUBLICATIONS = 'error_publications';
export const COMMENTS_LOADING = 'comments_loading';
export const COMMENTS_ERROR = 'comments_error';

// actions
// ...
export const getComments = (userPublicationsKey, publicationCommentsKey) => {
  return async (dispatch, getState) => {
    dispatch({
      type: COMMENTS_LOADING
    });
    
    const { publications } = getState().publicationsReducer;
    const publicationSelected = publications[userPublicationsKey][publicationCommentsKey];

    try {
      const response = await axios.get(`${API_URL}/comments?postId=${publicationSelected.id}`);
  
      const publicationSelectedUpdated = {
        ...publicationSelected,
        comments: response.data
      };
  
      const publicationsUpdated = [...publications];
      publicationsUpdated[userPublicationsKey] = [
        ...publications[userPublicationsKey],
      ];
      publicationsUpdated[userPublicationsKey][publicationCommentsKey] = publicationSelectedUpdated;
  
      dispatch({
        type: GET_PUBLICATIONS_BY_USER,
        payload: publicationsUpdated
      });
    }
    catch (error) {
      new Error(console.error('Error occured: ',error.message));
      dispatch({
        type: COMMENTS_ERROR,
        payload: `Comments not found: ${error.message}`,
      })
    }

    return ({});
  }
}

// reducers
// ...
const INITIAL_STATE = {
  publications: [],
  loading: false,
  error: '',
  commentsLoading: false,
  commentsError: false
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case GET_PUBLICATIONS_BY_USER:
      return {
        ...state,
        publications: action.payload,
        loading: false,
        error: ''
      }
    
    case LOADING_PUBLICATIONS:
      return {
        ...state,
        loading: true,
        error: ''
      }

    case ERROR_PUBLICATIONS:
      return {
        ...state,
        loading: false,
        error: action.payload
      }  

      case COMMENTS_LOADING:
        return {
          ...state,
          commentsLoading: true,
          commentsError: ''
        }
  
      case COMMENTS_ERROR:
        return {
          ...state,
          commentsLoading: false,
          commentsError: action.payload
        } 
      
    default: return state;
  };
};

// comments
import React from 'react';
import { connect } from 'react-redux';
import { Spinner } from '../Spinner';
import { Fatal } from '../Fatal';

const Comments = (props) => {

  const showContent = () => {
    if (props.cargando) return <Spinner />
    if (props.error) return <Fatal message={props.error} />

  };
  const setComments = () => {
    
    showContent();
    return props.comments.map((comment) => (
      <li key={comment.id}>
        <b>{comment.email}</b>
        <p>{comment.body}</p>
      </li>
    ));
  }

  return (<>
    <h5>Comments</h5>
    <ul>
      { setComments() }
    </ul>
  </>)
};

const mapStateToProps = ({ publicationsReducer }) => {
  return publicationsReducer;
};  

export default connect(mapStateToProps)(Comments);

Wilmer David Cedeño Mendoza

student•

Me pregunto porque no se realizió un reducer y un action para los Comentarios , como se hizo con Usuarios y Publicaciones ?

Matthew Dominick Rosell Felix

student•

En la clase https://platzi.com/clases/1613-redux/20672-modificando-respuesta-de-u-9/?time=4, los 35 primeros segundos explica porque no realizó un reducer y un action para los Comentarios.

Julián Andrés Vela Salazar

student•

Genial Curso!

Johan García Trejo

student•

hasta ahora todo excelente

Manuel Rivera

student•

Creo que no se genera nada por que esta preguntando por el Loading y no por el Com_Loading

Grace Nikole Avarado

student•

Sí, así es. En el siguiente video lo corrige :3

Cristian Andres Ladino Peña

student•

Excelente clase. 🙂

David Dias

student•

Bien, todas las partes de la aplicación siguen la regla de los 3 estados

// types
export const GET_PUBLICATIONS_BY_USER = 'get_publications_by_user';
export const LOADING_PUBLICATIONS = 'loading_publications';
export const ERROR_PUBLICATIONS = 'error_publications';
export const COMMENTS_LOADING = 'comments_loading';
export const COMMENTS_ERROR = 'comments_error';

// actions
// ...
export const getComments = (userPublicationsKey, publicationCommentsKey) => {
  return async (dispatch, getState) => {
    dispatch({
      type: COMMENTS_LOADING
    });
    
    const { publications } = getState().publicationsReducer;
    const publicationSelected = publications[userPublicationsKey][publicationCommentsKey];

    try {
      const response = await axios.get(`${API_URL}/comments?postId=${publicationSelected.id}`);
  
      const publicationSelectedUpdated = {
        ...publicationSelected,
        comments: response.data
      };
  
      const publicationsUpdated = [...publications];
      publicationsUpdated[userPublicationsKey] = [
        ...publications[userPublicationsKey],
      ];
      publicationsUpdated[userPublicationsKey][publicationCommentsKey] = publicationSelectedUpdated;
  
      dispatch({
        type: GET_PUBLICATIONS_BY_USER,
        payload: publicationsUpdated
      });
    }
    catch (error) {
      new Error(console.error('Error occured: ',error.message));
      dispatch({
        type: COMMENTS_ERROR,
        payload: `Comments not found: ${error.message}`,
      })
    }

    return ({});
  }
}

// reducers
// ...
const INITIAL_STATE = {
  publications: [],
  loading: false,
  error: '',
  commentsLoading: false,
  commentsError: false
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case GET_PUBLICATIONS_BY_USER:
      return {
        ...state,
        publications: action.payload,
        loading: false,
        error: ''
      }
    
    case LOADING_PUBLICATIONS:
      return {
        ...state,
        loading: true,
        error: ''
      }

    case ERROR_PUBLICATIONS:
      return {
        ...state,
        loading: false,
        error: action.payload
      }  

      case COMMENTS_LOADING:
        return {
          ...state,
          commentsLoading: true,
          commentsError: ''
        }
  
      case COMMENTS_ERROR:
        return {
          ...state,
          commentsLoading: false,
          commentsError: action.payload
        } 
      
    default: return state;
  };
};

// comments
import React from 'react';
import { connect } from 'react-redux';
import { Spinner } from '../Spinner';
import { Fatal } from '../Fatal';

const Comments = (props) => {

  const showContent = () => {
    if (props.cargando) return <Spinner />
    if (props.error) return <Fatal message={props.error} />

  };
  const setComments = () => {
    
    showContent();
    return props.comments.map((comment) => (
      <li key={comment.id}>
        <b>{comment.email}</b>
        <p>{comment.body}</p>
      </li>
    ));
  }

  return (<>
    <h5>Comments</h5>
    <ul>
      { setComments() }
    </ul>
  </>)
};

const mapStateToProps = ({ publicationsReducer }) => {
  return publicationsReducer;
};  

export default connect(mapStateToProps)(Comments);

Props por herencia vs estado

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