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

Compartir Reducer

28/57
Recursos

Aportes 16

Preguntas 0

Ordenar por:

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

También es recomendable hacer la verificación de datos en la pantalla de Usuarios

.
class Usuarios extends Component {
  
  componentDidMount(){    
    if (!this.props.usuarios.length){
      this.props.traerTodos()
    }
  }
.

Con un componente funcional 😃

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

const Posts = (props) => {

  useEffect(() => {
    if (!props.users.length) {
      props.getUsers()
    }
  })

  if (props.users.length === 0) {
    return <h2>Posts not found</h2>
  }

  return (
    <div>
      <h1>Post</h1>
      {console.log(props.users)}
      {props.match.params.key}
    </div>
  )

}

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

export default connect(mapStateToProps, usersActions)(Posts)

Hola Devs:
-Aqui les traigo mi avance:

  • Si no hay usuarios lanza un error y da la opcion de ir al home.
  • Si hay usuario, muestra el nombre del usuario al que posteriormente seleccionamos.

Todo esto y mas con Redux y la magia de los Hooks.
Les invito a pasarme por mi repositorio y ver mi propia solucion: Click Aqui
*Pueden mandarme PR si asi desean!
Recuerden, #NuncaParesDeAprender 💚

ahora todo tiene sentido - ahora si lo entiendo, aqui estudiandolo en un maraton de toda la noche jeje

Buen video mientras mas avanzo en el curso lo veo mas facil de entender.

Esta clase ayuda mucho a entender cómo funciona el estado del almacenamiento de Redux y cuándo un reducer tiene información o no.

Excelente clase. 💪

Para quienes utilizan @reach/router y desean utilizar match del parametro deben hacer lo siguiente.

const Posts = props => {
  useEffect(() => {
    if (!props.users.length) {
      props.setInitialState()
    }
  }, [])

  return (
    <>
      <h1>Publicaciones de </h1>
      <h2>{props.postId}</h2>
    </>
  )
}

const mapState = state => {
  return {
    users: state.usersReducer.users
  }
}

export default connect(mapState, userActions)(Posts)```

Nose si es un error pero cuando conecto Pub con el reducer de Users ya me trae los usuarios y no el estado inicial porque sucede esto?

Comparto código al día del hoy del <Publications />

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

class Publications extends Component {

  componentDidMount() {
    if (!this.props.users.length) {
      this.props.getUsers();
    }
  }

  render() {
    console.log(`this.props`, this.props)
    return (
      <div>
        {this.props.match.params.key}
      </div>
    )
  }
}

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

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

Tengo un pequeño error con la Ruta al irme a Pub y regreso a users se queda la ruta asi ‘http://localhost:3000/posts/’

Buen video

Buen vídeo, mientras mas avanzo mas entiendo y mas fácil se me hace

Excelente clase magistral

¿ Qué pasa si realmente no tengo usuarios ?
¿Se abriría un bucle infinito consultando por los usuarios?

Excelente