Bienvenido al curso

1

Conoce a tu profesor y todo lo que aprenderás sobre Redux

2

¿Qué conocimientos me recomiendan para tomar este curso?

Repaso React

3

¿Qué es React y cómo funciona?

4

Preparando nuestro entorno de trabajo

5

Creación de la app con React

6

Agregando funciones a la app con React

7

Stateful vs Stateless

8

Ciclo de vida de React

9

Manejando promesas

10

React Router DOM

Introducción a Redux

11

¿Qúe es Redux, cuándo usarlo y por qué?

Fases de Redux

12

Introducción: las fases de Redux

13

Store

14

Reducers

15

Conexión a un componente

16

Action Creators

17

Redux Thunk

18

Explicación teórica: ciclo completo de Redux

19

Práctica: ciclo completo de Redux

Fases Extra

20

Archivos Types

21

Try Catch

22

Escenarios asíncronos

23

Componente Spinner

24

Componente Fatal

25

Tabla como componente

Compartir información en Redux

26

Introducción Compartir información en Redux

27

Parámetros por URL

28

Compartir Reducer

29

Múltiples Reducers

30

Llamando a múltiples reducers en una acción

31

Uso del estado en la acción

32

Evitar segundas búsquedas

33

Inmutabilidad

34

Evitar sobrescritura

35

Validación compuesta

36

Validación de errores

37

Modificando respuesta de url

38

Estado con interacción

39

Mostrar componentes dinámicamente

40

Llamadas asincronas dinámicas

41

Props por herencia vs estado

42

Estado compartido

Métodos HTTP

43

Introducción a métodos HTTP

44

Nuevo ciclo Redux

45

Normalizar datos

46

Mapear Objetos

47

Componente para agregar tarea

48

Manejar inputs con Reducer

49

POST

50

Deshabilitando botón

51

Redireccionar

52

Reutilizar componentes

53

PUT

54

DELETE

55

Últimos detalles

Conclusión

56

Conocimientos adquiridos

57

Qué hacer a continuación

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Redux por Bedu

Curso de Redux por Bedu

Rodolfo Saldivar

Rodolfo Saldivar

Introducción a métodos HTTP

43/57
Recursos

Bienvenido al módulo para trabajar con métodos HTTP, normalizar datos, mapear objetos, POST, PUT y DELETE.

Pon en la sección de comentarios como vas con tu proyecto, nos interesaría saber que has hecho y cómo lo has hecho. No dudes en preguntar cualquier cosa en el área de discusiones.

Aportes 51

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

hasta éste punto, opino que todo el código que el profesor ha hecho necesita ser refactorizado

Realmente hay momentos en los que siento que estoy demasiado confundido, pero basicamente coprendo el ciclo de la data, donde el corazon es el store, y al rededor estan nuestros componentes, actions y reducers, debo practicar la comunicacion entre estos muchisimos, ya que me confundo cada vez que agregamos una funcionalidad al blog y estamos cambiando el scoope de la data y desestructurando para reasignar e importanto y exportando funct de una lado para otro… 🤷‍♂️

Honestamente se me ha hecho difícil el módulo anterior.

Los conceptos de Redux, aunque al principio son enredados, ya los logro entender. Me parece que el código se enredó al usar key y no id. (yo usé siempre el id y es más legible).
Acá les muestro cómo va el proyecto con cambios de estilos.

![](

Honestamente el curso empezo bien pero creo que falto explicar la logica de la app, se pierde mucho en las anteriores lecciones

Hasta ahora todo bien, perooo… lo de inmutabilidad le falto mas explicación a la final logre entender la lógica pero no la explico muy bien, toca leer interpretar por cuenta propia, ademas le falto manejar un estado de las peticiones HTTP y era el de si le llegan los datos pero vacios, porque la petición se puede realizar con éxito pero que pasa cuando una publicación no tiene comentarios, me toco manejarlo por cuenta propia pero igual exelente

Super! He aprendido bastante, recien hace unos dias hice el curso de Reactjs. Ahora entiendo la importancia de redux para manejar el state. Los estilos los estoy cambiando con Bootstrap 4 y estoy utilizando fetch() para las llamadas asincronas.

buenas muy buen curso solo una recomendación seria bueno escribir como comentario los objetivos o una breve descripción escrita en cada clase así como lo tiene esta clase 😉 .

Saludos a todos

Yo noté que habían varios aspectos del proyecto que me parecían redundantes o un poco caóticos, así que separé por componentes y páginas el proyecto. conecté los function components al reducer para extraer de forma más sencilla el estado y su información y siento que hasta ahora ha sido un muy buen curso

Maneje el ciclo del curso siempre con ID y no con el Key, ya que se me hace que puede ser mas seguro o una mejor práctica

Necesito practicar mas la lógica de la app, me confundo mucho todavía con Redux, pero es cuestión de seguir repasando.

Vengo haciendo la ruta de React js y al tener todos los cursos anteriores cursados, este curso se entiende muy bien. Lo otro que me ayudó harto para entender Redux, es que creé un proyecto propio totalmente diferente y con eso me quedo demasiado claro. Un abrazo!

Realmente el código hasta este punto es un poco confuso… por decir menos. Pero a favor lo que puedo decir es que es bueno leer código diverso y hasta complicado en algunos puntos, puesto que te obligan a salir de tu zona de confort y entender de manera más profunda que está sucediendo.

Seguramente haga otro proyecto aparte, donde se tratara de una mini e commerce, mas que nada porque era un proyecto que tenia ya hecho el diagrama y el mockup pero no sabia con que herramienta hacerlo, y conoci Redux, entiendo que hoy por hoy capaz lo pueda hacer solamente con React, pero creo que para aprender a como usar esta herramienta, me va ayudar:D

He tenido bastante problemas para entender el código, pero en las dos últimas clases creo que por fin le he comenzado a agarrar la onda a Redux.
Ahora solo queda terminar el curso y prácticar muy duro

Me encanta el curso, recién voy entendiendo como usar el state.
Los estilos los voy cambiando un poco en el index.css y sobre la marcha voy haciéndole el responsive.

Me gustaría ver más cursos de Bedu en Platzi (excelente el profesor Rodolfo).

En el proyecto estoy un poco enredado con el codigo pero despues lo leere con calma , lo unico que he mejorado o he cambiado hasta ahora es el mensaje de error 404 el resto todo voy como lo estas haciendo ya que soy primerizo en esta tecnologia de desarrollo.

El curso esta bien ya que el Rodolfo Saldivar es muy bueno explicando, me costo entender el modulo de compartir información sin embargo ahí vamos entendiendo, recomiendo que este curso lo mires con el enfoque de Redux y no React ya que el profesor no se enfoca en React porque para eso hay un curso de iniciación. Sin embargo alguien tiene un resumen o un post que me pueda ayudar a entender el modulo 6 porque si me a costado pero vamos aprendiendo.

Me parece uno de los mejores cursos que he tomado, el tema no es para nada facil pero lo hace entender mucho este profesor

Hola compañeros, sinceramente Redux fue al inicio un dolor de cabeza para mi, pero definitivamente la práctica hace que sea más posible entenderlo, la parte más dificil fue comprender el trabajo y la destructuración de las publicaciones por el tema de la key y esos detalles, pero el tener la consola abierta de depuración me ayudó bastante porque iba precisamente viendo el contenido de las keys y cada movimiento que hacía lo imprimía en un console.log.
He mejorado un poco el proyecto en términos de estilos y espero poder compartirles el resultado final para que envíen su feedback más salvaje 😃

Me costó entender la parte de inmutabilidad, a veces es necesario alguna clase más explicativa de temas que se ponen complejos para entender un poco mejor la lógica de los métodos que usa el profesor. Por lo demás las clases me parecen muy buenas.

La verdad como muchos estudiantes pienso que en el manejo del id es mucho mejor. Luego revise que lleva mucho mas computo porque hay que hacer un search entre los datos y se me paso. Sin embargo me ha parecido super interesante.

La verdad me enredé mucho en muchas partes del curso, pero, creo que no voy tan mal. Pero si me está tomando más tiempo tomar todo

Excelente, es muy buena la referencia, creo que realmente aprendo cuando hago un proyecto diferente por mi propia cuenta y aplicar los conocimientos aquí enseñados, de esa manera realmente refuerzo mi aprendizaje

Me parece muy genial el curso he aprendido y logrado entender redux, lo que he hecho distinto es dockerizar el proyecto y utilizar procesadores de estilos css en este caso sass, en cuanto el curso si bien me ha ayudado a entender redux, me parece que puede mejorar en como se implementa la lógica en el front me parece que se vuelve un poco código espagueti, seria bueno implementar una capa de negocio antes de ir a la vista, es el punto de mejora. Del resto muchas gracias por el curso me ha ayudado en mi crecimiento personal y en mi trabajo. :th

Hola, el curso es complejo para quienes no tienen ningún conocimiento en Redux, poco a poco se va entendiendo su uso e importancia, pero siento que falto más teoría y explicación en algunos detalles, por ejemplo, la inmutabilidad. En pocas palabras, faltaron más ejemplos o prácticas complementarias para que después los aplicáramos al proyecto del blog. Ahora nos queda seguir practicando y buscando más teoría para comprender mejor algunos puntos del curso.

Dejo el código con el refactor que consideré adecuado.
Espero sus comentarios acerca de cómo lo realicé:

// index
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import reduxThunk from 'redux-thunk';
import reducers from './reducers'
import App from './components/App';
import './styles/index.css';
import './styles/icons.css';

const store = createStore(
  reducers, // reducers
  {}, // initial state
  applyMiddleware(reduxThunk)
)

ReactDOM.render(
  <Provider store={ store }>
    <App />
  </Provider>,
  document.getElementById('root')
);

.

//App
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Menu from './Menu';
import Publications from './Publications';
import Todos from './Todos';
import Users from './Users';

class App extends React.Component {
  constructor() {
    super();
    this.state = {}
  }
  
  render() {
    return (
      <Router>
        <Menu />
        <Route exact path="/users">
          <Users />
        </Route>
        <Route exact path="/todos">
          <Todos />
        </Route>
        <Route exact path="/publications/:key">
          <Publications />
        </Route>
      </Router>
    );
  }
}

export default App;

.

// menu
import React from 'react'
import { Link, withRouter } from 'react-router-dom'

const Menu = (props) => {
  return (
    <nav className="Menu">
      <Link to="/users">Users</Link>
      <Link to="/todos">Todos</Link>
    </nav>
  )
}

export default withRouter(Menu);


// spinner
import React from 'react';
import '../../styles/components/Spinner.css';

export const Spinner = () => (
  <div className="Spinner">
    <h3>Loading</h3>
    <div className="lds-grid">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
);
// css spinner
.Spinner {
  text-align: center;
}
.lds-grid {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-grid div {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fed;
  animation: lds-grid 1.2s linear infinite;
}
.lds-grid div:nth-child(1) {
  top: 8px;
  left: 8px;
  animation-delay: 0s;
}
.lds-grid div:nth-child(2) {
  top: 8px;
  left: 32px;
  animation-delay: -0.4s;
}
.lds-grid div:nth-child(3) {
  top: 8px;
  left: 56px;
  animation-delay: -0.8s;
}
.lds-grid div:nth-child(4) {
  top: 32px;
  left: 8px;
  animation-delay: -0.4s;
}
.lds-grid div:nth-child(5) {
  top: 32px;
  left: 32px;
  animation-delay: -0.8s;
}
.lds-grid div:nth-child(6) {
  top: 32px;
  left: 56px;
  animation-delay: -1.2s;
}
.lds-grid div:nth-child(7) {
  top: 56px;
  left: 8px;
  animation-delay: -0.8s;
}
.lds-grid div:nth-child(8) {
  top: 56px;
  left: 32px;
  animation-delay: -1.2s;
}
.lds-grid div:nth-child(9) {
  top: 56px;
  left: 56px;
  animation-delay: -1.6s;
}
@keyframes lds-grid {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}


// fatal
import React from 'react';
import '../../styles/components/Fatal.css';

export const Fatal = ({ message }) => {
  return (
    <div className="Fatal">
      {/* <h3>URL error. pardon us, we're trying to reach again your petition</h3> */}
      <p>{message}</p>
    </div>
  )
}

.

// Users
import React from 'react';
import { connect } from 'react-redux';
import * as usersActions from '../../actions/components/usersActions';
import { Spinner } from '../Spinner';
import { Fatal } from '../Fatal';
import Table from './Table';
import '../../styles/components/Users.css';

class Users extends React.Component {
  componentDidMount() {
    if(!this.props.users.length) {
      this.props.getUsers();
    }
  }

  showContent = () => {
    // Loading state
    if (this.props.loading)
      return <Spinner />

    // Error state
    if (this.props.error) 
      return <Fatal message={this.props.error}/>

    // Success state
    return <Table users={this.props.users}/>
  }

  render() {
    // console.log(`this.props ─>`, this.props)
    return (
      <div className="margin-2rem">
        <h1>Users</h1>
        {this.showContent()}
      </div>
    )
  }
}

const mapStateToProps = ( reducers ) => {
  return reducers.usersReducer;
}

export default connect(mapStateToProps, usersActions)(Users);


// Table
import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';

const Table = (props) => {
  const drawUserRows = () => props.users.map(
    (user, key) => (
      <tr key={user.id}>
        <td>{user.name}</td>
        <td>{user.email}</td>
        <td>{user.website}</td>
        <td>
          <Link to={`/publications/${key}`}>
            <div className="eye-solid icon"></div>
          </Link>
        </td>
      </tr>
    )
  )
  
  return (
    <table className="App">
      <thead>
        <tr>
          <th>
            Nombre
          </th>
          <th>
            Email
          </th>
          <th>
            Enlace
          </th>
        </tr>
      </thead>
      <tbody>
        {drawUserRows()}
      </tbody>
    </table>
  )
}

const mapStateToProps = (reducers) => {
  return reducers.usersReducer
}

export default connect(mapStateToProps)(Table);

.

// usersTypes
export const GET_USERS = 'get_all_users';
export const LOADING_USERS = 'loading_users';
export const ERROR_USERS = 'error_users';

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

.

// usersActions
import axios from 'axios';
import { GET_USERS, LOADING_USERS, ERROR_USERS } from '../../types/usersTypes';

const API_URL = 'https://jsonplaceholder.typicode.com/users';

export const getUsers = () => {
  return async (dispatch) => {
    dispatch({
      type: LOADING_USERS
    })
    
    try {
      const response = await axios.get(API_URL);

      dispatch({
        type: GET_USERS,
        payload: response.data,
      });
    }
    catch (err) {
      new Error(console.error('Error occured: ',err.message));
      
      dispatch({
        type: ERROR_USERS,
        payload: `There's something went wrong: ${err.message}`,
      });
    }
  }
}

.

// usersReducer
import { GET_USERS, LOADING_USERS, ERROR_USERS } from '../../types/usersTypes';

const INITIAL_STATE = {
  users: [],
  loading: false,
  error: ''
};

// eslint-disable-next-line import/no-anonymous-default-export
export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case GET_USERS:
      return {
        ...state,
        users: action.payload,
        loading: false,
        error: ''
      }

    case LOADING_USERS:
      return {
        ...state,
        loading: true
      }

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

    default: return state;
  };
};

.

// publications
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withRouter } from "react-router";
import * as usersActions from '../../actions/components/usersActions';
import * as publicationsActions from '../../actions/components/publicationsActions';
import Comments from './Comments';
import { Spinner } from '../Spinner';
import { Fatal } from '../Fatal';

const { getUsers: getAllUsers } = usersActions;
const {
  getUniqueUser: getPublicationsByUser,
  openAndClosePublications,
  getComments,
} = publicationsActions;

class Publications extends Component {

  async componentDidMount() {
    const {
      match: { params: { key } },
      getAllUsers,
      getPublicationsByUser,
    } = this.props;

    if (!this.props.usersReducer.users.length) await getAllUsers();

    if (this.props.usersReducer.error) return;

    if (!('userPublicationsKey' in this.props.usersReducer.users[key]))
      await getPublicationsByUser(key);
  }

  getUser = () => {
    const {
      match: { params: { key } },
      usersReducer
    } = this.props;

    if (!usersReducer.users.length || usersReducer.loading)
      return <Spinner />;
    if (usersReducer.error)
      return <Fatal message={usersReducer.error} />;

    return this.showUserInfo(usersReducer, key);
  }
  showUserInfo = (usersReducer, key) => (
    <div className="publications_name">
      <span>Publications of:
        <b>{` ${usersReducer.users[key].name}`}</b>
      </span>
    </div>
  )

  getPublications = () => {
    const {
      usersReducer,
      publicationsReducer,
      usersReducer: { users },
      publicationsReducer: { publications },
      match: { params: { key } }
    } = this.props;

    // Se valida info del usuario
    // la información del usuario no existe
    if (!users.length) return;
    // la información del usuario tiene error
    if (usersReducer.error) return;

    // Se revisa info de las publicaciones
    // info publicaciones cargando
    if (publicationsReducer.loading)
      return <Spinner />;
    // la información de publicaciones tiene error
    if (publicationsReducer.error)
      return <Fatal message={publicationsReducer.error} />;

    // Se revisa que las publicaciones se encuentren
    // la información de publicaciones no existe
    if (!publications.length) return;
    // la información de publicaciones por user no existe
    if (!('userPublicationsKey' in users[key])) return;

    // Se extrae la posición de las publicaciones del usuario de todas las publicaciones
    const { userPublicationsKey } = users[key];

    return this.showPublicationsInfo(
      publications[userPublicationsKey],
      userPublicationsKey,
    );
  }
  showPublicationsInfo = (userPublications, userPublicationsKey) => {
    return userPublications.map((publication, publicationCommentsKey) => (
      <div
        key={`${publication.userId}_${publication.id}`}
        className="publications_body"
        onClick={
          () => this.showComments(
            userPublicationsKey, 
            publicationCommentsKey, 
            publication.comments
          )
        }
      >
        <h4> {publication.title}
        </h4>
        {
          (publication.isOpen)
            ? <div>
              <p>{publication.body}</p>
              <Comments comments={publication.comments} />
            </div>
            : <span>Abrir</span>
        }
      </div>
    ));
  };

  showComments = (userPublicationsKey, publicationCommentsKey, comments) => {
    this.props.openAndClosePublications(userPublicationsKey, publicationCommentsKey);
    if (!comments.length) this.props.getComments(userPublicationsKey, publicationCommentsKey);
  }

  render() {
    console.log(`this.props <──`, this.props)
    return (
      <div className="margin-2rem">
        {this.getUser()}
        {this.getPublications()}
      </div>
    )
  }
}

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

const mapDispatchToProps = {
  getAllUsers,
  getPublicationsByUser,
  openAndClosePublications,
  getComments
};

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Publications));

.

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

const Comments = (props) => {
  const setComments = () => {
    if (props.commentsError) return <Fatal message={props.commentsError} />;
    if (props.commentsLoading && !props.comments.length) return <Spinner />;

    return showContent(props.comments);
  };
  const showContent = (comments) => {
    return 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);

.

// publicationsActions
import axios from "axios";
import {
  GET_PUBLICATIONS_BY_USER,
  LOADING_PUBLICATIONS,
  ERROR_PUBLICATIONS,
  GET_COMMENTS,
  COMMENTS_LOADING,
  COMMENTS_ERROR
} from '../../types/publicationsTypes';
import * as usersTypes from '../../types/usersTypes';

const API_URL = 'https://jsonplaceholder.typicode.com';
const { GET_USERS: GET_ALL_USERS } = usersTypes;

export const getUniqueUser = (key) => {
  return async (dispatch, getState) => {
    dispatch({
      type: LOADING_PUBLICATIONS
    });

    const { users } = getState().usersReducer;
    const { publications } = getState().publicationsReducer;
    const userId = users[key].id;

    try {
      const response = await axios.get(`${API_URL}/posts?userId=${userId}`);
      // agrego el arreglo de comentarios y variable open/close a cada publicación
      const newPublications = response.data.map((publication) => ({
        ...publication,
        comments: [],
        isOpen: false
      }));
      const publicationsUpdated = [
        ...publications,
        newPublications,
      ];

      dispatch({
        type: GET_PUBLICATIONS_BY_USER,
        payload: publicationsUpdated
      });

      // Agregamos la key de la posición de la publicación del usuario
      const userPublicationsKey = publicationsUpdated.length - 1;
      const usersUpdated = [ ...users];
      usersUpdated[key] = {
        ...users[key],
        userPublicationsKey,
      }

      dispatch({
        type: GET_ALL_USERS,
        payload: usersUpdated
      });      
    }
    catch (error) {
      new Error(console.error('Error occured: ',error.message));
      dispatch({
        type: ERROR_PUBLICATIONS,
        payload: `Publications not found: ${error.message}`,
      })
    }
  }
}

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

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}/commentss?postId=${publicationSelected.id}`);
  
      const publicationSelectedUpdated = {
        ...publicationSelected,
        comments: response.data
      };
  
      const publicationsUpdated = [...publications];
      publicationsUpdated[userPublicationsKey] = [
        ...publications[userPublicationsKey],
      ];
      publicationsUpdated[userPublicationsKey][publicationCommentsKey] = publicationSelectedUpdated;
  
      dispatch({
        type: GET_COMMENTS,
        payload: publicationsUpdated
      });
    }
    catch (error) {
      new Error(console.error('Error occured: ',error.message));
      dispatch({
        type: COMMENTS_ERROR,
        payload: `Comments not found: ${error.message}`,
      })
    }

    return ({});
  }
}

.

// publicationsReducer

import {
  GET_PUBLICATIONS_BY_USER,
  LOADING_PUBLICATIONS,
  ERROR_PUBLICATIONS,
  GET_COMMENTS,
  COMMENTS_LOADING,
  COMMENTS_ERROR
} from '../../types/publicationsTypes';

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

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

    case LOADING_PUBLICATIONS:
      return {
        ...state,
        loading: true,
      }

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

    case GET_COMMENTS:
      return {
        ...state,
        publications: action.payload,
        commentsLoading: false,
        commentsError: ''
      }

    case COMMENTS_LOADING:
      return {
        ...state,
        commentsLoading: true,
      }

    case COMMENTS_ERROR:
      return {
        ...state,
        commentsError: action.payload
      }

    default: return state;
  };
};

Buen curso, entiendo que es un poco confuso, creo que el unico detalle es que el profesor te va enseñando y resulta que lo que te estaba enseñando era un error y ya depues te enseña la forma correcta eso te distrae un poco, a mi parecer seria bueno que te enseñara la forma correcta y despues los posibles errores.

Nuevo módulo, excelente.

Me tomé la libertad de realizar el proyecto de este curso con Hooks en lugar de clases

el curso ha estado genial! un poco complicado el tema de inmutable pero y le iré agarrando el juego 😃

Hasta el ahora el curso va genial! Ha sido un poco confuso en ciertas partes como el por qué ir guardando en el store todas las visitas a las publicaciones, supongo que esto último es para evitar estar haciendo consultas en varias ocasiones y mejorar el performance de la misma.

El Curso va super genial!!! He aprendido mucho sobre Redux, le temìa un poco a Redux porque lo veia algo complicado, pero todo lo que he visto del curso me ha funcionado y lo he entendido, muchas gracias! Excelente curso…

Me gusto mucho el curso, concuerdo con algunos comentarios que estuve leyendo, un poco complicado en el momento de manejar condicionales debido a que se tiene muchas de estas. Pero en pocas palabras logre entender la importancia de usar Redux, la importancia de que puedas compartir datos globales y la gran cantidad que peticiones que uno puede evitar ayuda mucho al rendimiento de tu aplicación. Excelente!

Hola, poco a poco fuí adaptándome al contenido del curso. Al principio me costó entender un poco, pero realmente ha sido un buen curso.

El profesor es muy atinado en enseñar el uso de Redux y no fijarse tanto en el buen uso de React, ya que para eso existe el curso de React.js. Este curso de por si es largo y al fin logre entender Redux.

En un principio el curso me pareció muy entreverado, pero logré agarrarle la mano y entenderlo.
El proyecto lo voy haciendo igual al del profesor, ya que mi idea es intentar entender lo mejor posible Redux ya que Reacto lo voy llevando bastante bien…

El curso lo pude seguir casi tal cual como lo tiene el profe por suerte. Si cambié algunas cosillas pero fueron menores. Es un muy buen curso sinceramente, porque Redux en si no es fácil de implementar y se volvió bastante entendible.
Hay que entender también que es un curso muy profundo en el tema que aborda.

Excelente

Hay muchos temas; unos me han costado mas que todos, pero igual es un proceso de aprendizaje, con practica se van reforzando los conocimientos. El curso es super y el profe tambien tiene una actitud muy buena a la hora de explicar.

Excelente, se ha visto muchísimo contenido. 🙂

Vamos muy bien

Excelente!

Este modulo al inicio me parecio un poco confuso, no lograba entender mucho , pero la practica y repasando de nuevo el codigo y analizandolo nuevamente , entendi todo y me alegra mucho que use destructuracion y los spread operators , me hizo afianzar mas conocimientos sobre estos.

El curso es muy bueno, claro hay parte que se me complica pero tengo que ver el vídeo dos veces para poder entenderlo. Pero con practica se puede.

Citando las palabras de Fredy “un desarrollador pasa más tiempo leyendo código”, la técnica usada es muy completa para un objetivo sencillo, y al no poder entenderlo fácilmente tampoco es es fácilmente mantenible, resultado: no es viable. Quizá se podría simplificar con el uso de hooks encapsulando lógica.

Yo use la API de rick & Morty costo pero quedo al 100

La verdad es que tome el curso y me perdi… pero despues de 1 mes volvi y todo se aclaro…
vamos por ++

Hola Devs:
Les cuento mi experiencia hasta ahora:
Desde el principio del curso me incline a trabajar desde cero el proyecto usando: Webpack y SSR.
-Asi aplicada los conocimientos que habia adquirido en demas cursos; y vaya que tome una gran decision, con todo el lio que hizo el profesor creo que no pude tomar mejor decision.
-Obviamente no fue facil, pero entendi como funciona el ciclo de vida con Redux e hice mis propias implementaciones, teniendo como resultado un codigo mas limpio y mantenible.
-Para los que desean checar mi codigo, visiten mi repo aqui: Cick Aqui

Hasta ahora uno de los mejores cursos que he tomado, este curso me ha hecho pensar bastante para seguir la lógica del profe y aprender neuvos procesos lo cual valoro mucho.

Mi proyecto va bastante bonito
En cuanto al codigo, bueno, una que otra falencia
Sin embargo he entendido todo y no hay nada que se haya explicado que no se haya aplicado
Muy bueno por eso