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

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de Redux por Bedu

Curso de Redux por Bedu

Rodolfo Saldivar

Rodolfo Saldivar

Nuevo ciclo Redux

44/57
Recursos

Aportes 28

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Despues de 44 videos y 1 semana entera estudiando redux se hace mas comprensible xD

Despues del largo modulo anterior y un descanso, espero poder comprender mejor el manejo del scoope de la data.

Resumen de la clase, xD (con redux todo es bonito al principio)
![](

Hice el curso de Oscar de React Router y Redux antes que este.

Y aunque me enredaba menos con Oscar, cuándo quise pasar a aplicar Redux en mis proyectos de trabajo quedé muy confundido, no sabía dónde estaban mi errores.

Este curso es más pesado y “confuso”, pero es por la cantidad de información que trata de meter Rodolfo en cada clase, por lo que puede saturar bastante el cursarlo (a este punto ya llevo más de una semana).

Sin embargo con lo anterior ya pude aplicar Redux en mis proyectos de forma efectiva, espero este nuevo módulo sea menos traumático que el anterior.

¡Gracias de cualquier forma Rodolfo!

Los archivos no deberían tener la extensión ‘.jsx’?

Como se nota que ahora hacer todo lo que ya hicimos para usuarios y publicaciones con tareas es muchísimo mas rápido y entendible

intente poner material ui pero tengo un prblema ahi con el uso de styles 😄

0:54 como hace el profesor para escribir el componente tan rápido?

El enlace para ver las tareas:
https://jsonplaceholder.typicode.com/todos

Me paso que el código funcionaba, pero no me daba el console.log con las 200 tareas.
En vez de importaba tareasReducer estaba importando el publicacionesReducer.
Espero le sirva a alguien 😉

Después de practicar y practicar ya es muy sencillo crear un ciclo Redux desde 0. 😄

como hace el profesor para escribir el componente tan rápido?

Clase muy buena!

Clase Práctica: Ciclo de vida completo

Nuevo ciclo Redux

Creamos la carpeta “Tareas” dentro de components.

Su archivo index.js:

import React, { Component } from 'react'
import { connect } from 'react-redux'
import * as tareasActions from './../../actions/tareasActions'

class Tareas extends Component {
  componentDidMount(){
    this.props.traerTodas();
  }
  render() {
    console.log(this.props);
    return (
      <div>
        ¡Tareas!
      </div>
    )
  }
}

const mapStateToProps = ({ tareasReducer }) => tareasReducer;

export default connect(mapStateToProps, tareasActions)(Tareas);

Creamos el archivo tareasTypes.js:

export const TRAER_TODAS = 'tareas_traer_todas';
export const CARGANDO = 'tareas_cargando';
export const ERROR = 'tareas_error';

Creamos su reducer, tareasReducer.js:

import { TRAER_TODAS, CARGANDO, ERROR } from '../types/tareasTypes';

const INITIAL_STATE = {
  tareas: {},
  cargando: false,
  error: ''
};

// eslint-disable-next-line import/no-anonymous-default-export
export default (state = INITIAL_STATE, action) => { //* El estado es el initial state que regresa una función
  //!Se crea el switch porque llegarán varias tareas y solo se distingue por el nombre
  switch(action.type) {
    case TRAER_TODAS:
      return { ...state, tareas: action.payload, cargando: false, error: '' };
    case CARGANDO:
      return { ...state, cargando: true};
    case ERROR:
      return { ...state, error: action.payload, cargando: false };
    default: return state;
  }
}

Creamos sus acciones, tareasActions.js:

import axios from 'axios';
import { TRAER_TODAS, CARGANDO, ERROR } from '../types/tareasTypes';

//*Esto es una promesa por estar haciendo una petición HTTP GET
export const traerTodas = () =>  async (dispatch) => { //* Función que retorna otra función
  dispatch({
    type: CARGANDO
  });

  try {
    const respuesta = await axios.get('https://jsonplaceholder.typicode.com/todos');
    dispatch({ //* Este dispatch se comunicará con el reducer
      type: TRAER_TODAS,
      payload: respuesta.data,
    });
  } catch (error) {
    console.error(`Error: ${error.message}`);
    dispatch({
      type: ERROR,
      payload: 'Información de tareas no disponible',
    })
  }
}

Y agregamos esto al index.js de reducers:

import { combineReducers } from "redux";
import usuariosReducers from "./usuariosReducers";
import publicacionesReducer from "./publicacionesReducer";
import tareasReducer from "./tareasReducer";

export default combineReducers({
  usuariosReducers,
  publicacionesReducer,
  tareasReducer
});

Wow genial ese repaso

Luego de repetir el curso por segunda vez, he podido construir todos estos pasos que pide en el video, sin ver, y tampoco ver los archivos creados, ayudándome solo de mis apuntes, y código por código. dando así por entendido los conocimientos adquiridos hasta el momento.

Ya voy entendiendo 😃

que buen curso!

Ya como que me va quedando todo más claro.

Me parecio mas entendible esta parte del curso .

Excelente clase. 🙂

Ya todo se va haciendo mucho más sencillo

Creo que el profe lo hace muy bien, redux es complicado de entender cuando uno está comenzando. No es culpa de él que sea dificil, de hecho creo que lo hace muy ameno y sencillo.
Después de varias horas de trabajo y dolores de cabeza con redux lo pude comprender de repente y bien. De todo lo que el profesor ha enseñado desde ese momento he entendido un 99% de las cosas.

Es bueno que a estas alturas del curso haya un pequeño repaso a mayor velocidad. Para refrescar los conocimientos adquiridos.

Wow! Ahora todo comienza a tener sentido, excelente clase!!!

spagetti-code-wars !!

Me perdi mucho y aunque entendi el tema del ciclo de redux y su funcionamiento el codigo del profe se me hizo dificil seguir con el proyecto, Aqui les dejo un link que explica redux, esta en ingles pero creo que es entendible.

https://chriscourses.com/blog/redux