Componente Fatal

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á “Fatal.js” y estará dentro de la carpeta “components”.

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.