Componente Fatal

Clase 24 de 57 • Curso de Redux por Bedu

Contenido del curso

Bienvenido al curso

Repaso React

Introducción a Redux

11
¿Qúe es Redux, cuándo usarlo y por qué?
00:15 min

Fases de Redux

Fases Extra

Compartir información en Redux

Métodos HTTP

Conclusión

Tomar examen

Comentarios

Luis Carlos Zabala

student•

Elias Ojeda Medina

student•

Te quedo padre la página de error 404

Jesus Ruvalcaba Miranda

student•

mi propio componente fatal

Nahuel Castro

student•

Me gusta! Con qué programa lo hiciste?

Ernesto Vizcaíno Alvarado

student•

@Nahuel Castro Ese es el código del componente fatal

Manuel Rivera

student•

Wandy Rafael Santana Evangelista

student•

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

Edgar Lopez Arroyo

student•

TE quedo genial

Jhon Manuel Angulo Moncada

student•

así vamos...!

Luis Abdel Rangel Castro

student•

Manuel Gerardo Flores Quiñonez

student•

Asi lo llevo

Rony Porraz Vargas

student•

Frank Antonio Piñin Ato

student•

Mi pagina de ERROR

David Chinchin

student•

import React from 'react';

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

export default Fatal;

Jorge De Jesus Tejeda Bello

student•

De esta manera se ve mas limpio

Willy David Da Conceicao Lozada

student•

Como puedo saber que tipo de error sucedio por ejemplo yo quiero renderear algo cuando ocurra un error 501 y otro diferente cuando ocurra uno 404 Gracias de antemano...

César David Arroyo Torres

student•

Error.name devuelve el nombre del error

Willy David Da Conceicao Lozada

student•

Gracias amigo

Jhean Pacheco

student•

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

Alex Abel Lerman

student•

Rodrigo Milesi

student•

Grace Nikole Avarado

student•

Va quedando así :3

Sebastian Londoño Calle

student•

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.

Iván Darío Sánchez Jiménez

student•

Comparte el método ponerContenido() que creo saber que es, por favor.

David Dias

student•

Podemos guardar el error igualmente en el store cierto?

Luis Lira

student•

Hola!

Sí, sin problemas podrías guardar esa información dentro del estado global, aunque si lo vas a hacer debes tener un buen motivo. También hay que tener cuidado en el uso del store, este debe ser solo para la información que queremos compartir entre varios componentes de la aplicación,

Juan Felipe Salamanca Gonzalez

student•

Una pregunta, ¿Hay forma de que pueda cambiar el color de todo el fondo unicamente en una sola pagina?

Ya que cuando agrego el estilo al body este permanece en los demas aunque le cree un archivo css exclusivo, quisiera saber si esto es posible o hay alguna otra forma de conseguirlo

Jose Antonio Rivera

student•

la verdad pues tienes varias opciones la primera podria ser utilizar un contenedor en esa pagina que reprensararia todo tu body y asi tienes a ese contenedor le pones un id unico.

<div id="contenedor">
   <div>
      algun div
   </div>
</div>

Juan Felipe Salamanca Gonzalez

student•

@nekitori si intento hacer eso me genera conflicto con los estilos globales ya que se le aplica el margen que tiene todos los textos del dom a excepcion del navbar

Willy David Da Conceicao Lozada

student•

como le hace para crear el componete funcional de golpe sin estar escribiendo manualmente, import react from " badbiabd" ect?

Gabriel De Andrade

student•

Son snippets, así como cuando escribes html y te crea el html completo, solo que este lo instalas por separado React Snippets aquí hay uno de los muchos paquetes de snippets de react :D

Willy David Da Conceicao Lozada

student•

gracias amigo

Berenice Ramos

student•

Andrés Felipe Eslava Zuluaga

student•

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">
      <h4>URL error. pardon us, we're trying to reach again your petition</h4>
      <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);

// 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">
      <h4>URL error. pardon us, we're trying to reach again your petition</h4>
      <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

Bienvenido al curso

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

¿Qué conocimientos me recomiendan para tomar este curso?

Repaso React

¿Qué es React y cómo funciona?

Preparando nuestro entorno de trabajo

Creación de la app con React

Agregando funciones a la app con React

Stateful vs Stateless

Ciclo de vida de React

Manejando promesas

React Router DOM

Introducción a Redux

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

Fases de Redux

Introducción: las fases de Redux

Store

Reducers

Conexión a un componente

Action Creators

Redux Thunk

Explicación teórica: ciclo completo de Redux

Práctica: ciclo completo de Redux

Fases Extra

Archivos Types

Try Catch

Escenarios asíncronos

Componente Spinner