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

Componente Fatal

24/57
Recursos

Aportes 30

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

mi propio componente fatal

as铆 vamos鈥!

Hola Devs:
-Para los que deseen encontrar imagenes como la que utilice, visiten este website: Click Aqui
-Aqui mi pagina de 404:

Asi lo llevo

Mi pagina de ERROR

import React from 'react';

const Fatal = ({ mensaje }) => (
    <h2>
        { mensaje }
    </h2>
);

export default Fatal;

Les comparto mi pantalla de error, indica informaci贸n que puede ser enviada por el usuasrio para ayudar a debuggear

Va quedando as铆 :3

Cuando intento que me arroje el error da帽ando la url, me saca el siguiente error

this.props.usuarios.map is not a function

5 |
6 | import * as usuariosActions from 鈥樷/鈥/actions/usuariosActions鈥;
7 |

8 | class Usuarios extends Component {
9 |
10 | async componentDidMount() {
11 | this.props.traerTodos();

Ya descargue el codigo de archivos y enlaces, sin modificar nada y me sigue arrojando el error cuando modifico la url para que me saque error.

Mi soluci贸n:

// usersActions.js
import { GET_USERS, LOADING, ERROR } from '../types/usersTypes';

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

export const getUsers = () => {
  return async (dispatch) => {
    dispatch({
      type: LOADING
    })
    
    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,
        loading: false,
        payload: `There's something went wrong: ${err.message}`,
      });
    }
  }
}

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

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

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

class Users extends React.Component {
  componentDidMount() {
    this.props.getUsers();
  }

  drawUserRows() {
    return this.props.users.map(user => (
      <tr key={user.id}>
        <td>{user.name}</td>
        <td>{user.email}</td>
        <td>{user.website}</td>
      </tr>
    ))
  }

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

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

    return (
      <table className="App">
        <thead>
          <tr>
            <th>
              Nombre
            </th>
            <th>
              Correo
            </th>
            <th>
              Enlace
            </th>
          </tr>
        </thead>
        <tbody>
          {this.drawUserRows()}
        </tbody>
      </table>
    )
  }

  render() {
    console.log(`this.props`, this.props)
    return <>
      {this.showContent()}
    </>
  }
}

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

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

Componente Fatal

Creamos el componente para mostrar un mensaje de error.

El componente se llamar谩 鈥淔atal.js鈥 y estar谩 dentro de la carpeta 鈥渃omponents鈥.

import React from 'react'

const Fatal = (props) => (
  <h2 className="center rojo">
    { props.mensaje }
  </h2>
)

export default Fatal

En el index.js de los usuarios:

if (this.props.error) {
  return <Fatal mensaje={ this.props.error } />;
}

En usuariosActions.js podemos dar un mensaje personalizado:

dispatch({
  type: ERROR,
  payload: 'Algo sali贸 mal. Intente m谩s tarde.',
})

Aqui mi repo con functional components
https://github.com/gbrayhan/ReduxCursoBedu

Muy cool, pero creo que quitar el error que vienen en el catch no es buena idea, lo correcto seria colocar el error del catch mas un texto amigable en el componente fatal no?

Algo que comunmente pasa es que usamos strings vacios en los estados, en este en el estado error. Y luego al evaluarlos para renderizarlos tenemos el problema de que a veces las condiciones confunden un true o false si tiene 鈥溾 es mejor usar null o booleanos.

Genial, lo que pregunt茅 hace dos clases resuelto!!!

Excelente clase. 馃檪

Excelente clase sobre los errores. Mil gracias 馃槃

Exelente pagina para los spinners

Super bien explicado!

Muy genial, el armado de componentes para responder a estas necesidades

Este curso es genial, te hace querer seguir viendo

En freepik pueden encontrar buenos vectores de error

Que genial esta saliendo todo.