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

Props por herencia vs estado

41/57
Recursos

Aportes 12

Preguntas 0

Ordenar por:

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

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