Props por herencia vs estado

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

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

Por ahora todo corre muy bien

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

Buena clase!

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 (<>
    <h4>Comments</h4>
    <ul>
      { setComments() }
    </ul>
  </>)
};

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

export default connect(mapStateToProps)(Comments);

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

Genial Curso!

hasta ahora todo excelente

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

Excelente clase. 🙂

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