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

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Redux por Bedu

Curso de Redux por Bedu

Rodolfo Saldivar

Rodolfo Saldivar

Componente Spinner

23/57
Recursos

Aportes 24

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

He entendido más ahorita que en el curso anterior, la calidad de los cursos ha mejorado bastante.

Hola Devs:
-Para simular perfectamente la animacion de cargar, les recomiendo que vaya a las DevsTools (click derecho inspeccionar), en la seccion de network o red, y utilizar la conexion 3g slow, asi simularian el retardo de la peticion y podran simular perfectamente.

Aqui les tengo mi avance en lo que va del curso, realizado por mi propia solucion:

Mi componente principal Users:

Mi componente TableContainer:

Mi componente TableUsers:

Pueden visitar mi repositorio donde tengo todo el avance del curso sin problemas y hecho totalmente configurado desde cero: Click Aqui
Recuerden, #NuncaParesDeAprender 💚

estoy entendiendo todo con Rodolfo, excelente explicación.

Hasta ahora claro se va entiendo muy bien, claro yo tengo el curso anterior, pero en este he entiendo muy bien, sobretodo la llamada al Api, que es para mi muy importante.

Si vuelven a hacer un curso sobre redux, por favor vuelvan a poner a este profesor, es muy bueno. Es de los mejores profesores que he visto en Platzi.

cuidado con poner el código del loader con {} y no con () ya que nos va a generar un error por que si lo ponen con {} el programa va a esperar una función cuando no es el caso.

Este es codigo bien hecho

import React from 'react'
import '../../css/loader.css'
const Loader = () => (
  <div className="center">
    <div className="lds-ellipsis">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
  </div>
)

export default Loader

(los divs y el className varian dependiendo del Spinner que escogieran)

Aqui hay mas animaciones de carga con css
tobiasahlin.com/spinkit

Para poder ver mejor el escenario, pueden ir a la opción de network presionando f12 y selecionado Network buscan la palabra online y la cambian por slow3G para poder observar la palabra cargando.

Yo lo implemente así:

import React, { Component } from "react";
import { connect } from "react-redux";

import * as usersActions from "../../src/actions/usersActions";

import "./styles/Users.css";

import Loader from "./Loader"

class Users extends Component {
  addRows = () =>
    this.props.users.map((user) => (
      <tr key={user.id}>
        <td>{user.name}</td>

        <td>{user.email}</td>

        <td>{user.website}</td>
      </tr>
    ));

  componentDidMount() {
    this.props.getAll();
  }

  render() {
    console.log(this.props.loading)
    console.log(this.props.error)

    let isLoading = this.props.loading;
    return (
      <div className="margin">
        <table className="table">
          <thead>
            <tr>
              <th>Nombre</th>

              <th>Correo</th>

              <th>Enlace</th>
            </tr>
          </thead>

          <tbody>{isLoading ? <Loader /> : this.addRows()}</tbody>
        </table>
      </div>
    );
  }
}

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

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

vamos mejorando 😃

Muy bien por el componente de Spinner es genial

Justo ese era mi pregunta la clase anterior xd

Comparto mi solucion, estoy tomando el curso en 2022, por eso aplique estos conceptos:

  • componentes funcionlaes
  • useEffect (en vez de componentDidMont)
  • finalmente hice una separacion de componentes para tener mas orden
import * as actionCreator from '../../Redux/Actions/usersActionsCreator';
import { connect } from 'react-redux';
import React, {useEffect} from 'react';
import UserItem from './userItem';
import Loading from '../../Pages/Loading';
import Error from '../../Pages/Error';

function Users(props) {

    useEffect( ()=>{
        // Si ya traje usuarios no hay que volver a traerlos
        if (!props.users.length) {
            // Esta funcion se encuenra en usersActionsCreator
            props.fetchUsers();
        }
    },[] );

    return (
        <div className="container py-3">
            { (props.error && !props.loading) && ( <Error error={props.error}/> ) }

            { props.loading && ( <Loading/> ) }

            { (!props.loading && !props.error) && <UserItem/>  }
        </div>
    )
}

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

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

Mi aporte:

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

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() {
    return (
      this.props.loading
        ? <Spinner />
        : (
          <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);


// spinner.js
import '../../styles/components/Spinner.css';

export const Spinner = () => (
  <div className="Spinner">
    <h3>Cargando</h3>
    <div className="lds-grid">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
);

Componente Spinner

Pure CSS Loader

Le vamos a decir al usuario que la información está cargando con el uso de animaciones.

Podemos tomar de la página web cualquier Spinner o Loader que querramos en nuestro proyecto.

Copiamos el código CSS y este lo guardaremos como un componente, así que creamos una carpeta “css” y dentro
hacemos el archivo “loader.css”.

Luego copiamos el código HTML, esté será guardado dentro la carpeta “General”, dentro de la carpeta “components”.

Loader.js:

import React from 'react';
import '../../css/loader.css';

const Loader = (props) => (
  <div className="center">
    // Código del Loader
  </div>
);

export default Loader;

Modificamos el archivo index.js de la carpeta users:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Loader from '../General/Loader';
import * as usuariosActions from '../../actions/usuariosActions';

class Users extends Component {

  componentDidMount() {
    this.props.traerTodos();
  }

  ponerContenido = () => {
    if (this.props.cargando) {
      return <Loader />;
    }

    return(
      <table className="tabla">
        <thead>
          <tr>
            <th>Name</th>
            <th>Correo</th>
            <th>Enlace</th>
          </tr>
        </thead>
        <tbody>
          { this.ponerFilas() }
        </tbody>
      </table>
    )
  }

  //* Por cada usuario, tendré una fila
  ponerFilas = () => this.props.usuarios.map((usuario) => (
    <tr key={ usuario.id }>
      <td>{ usuario.name }</td>
      <td>{ usuario.email }</td>
      <td>{ usuario.website }</td>
  </tr>
  ))

  render(){
    return (
      <div>
        { this.ponerContenido() }
      </div>
    )
  }

}

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

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

Con esto tenemos un Loader que se va a mostrar cuando estamos cargando información.

el inicio del curso fue un poco doloroso pero el profe es tan bueno que eventualmente es fácil entender la clase

muy Buena clase

Hasta ahora todo muy claro

Excelente clase. 🙂

Me lo estoy gozando con estas clases por que todo me queda muy claro 😄

Directo a marcadores esa pagina de spinners. Si alguien tiene mas de esas aviseme

Por alguna razón al borrar el index.css de /src me marco errores provenientes de node_modules diciendo que no encontraba el archivo index.css que (yo creo) corre por default alguna paquetería. Lo resolví con:

npm rebuild node-sass

excelente clase!!

Me agrada la forma de explicación del profesor, pero estoy realmente absorto de la forma en que se ordenan los archivos porque pareciese que no hay una metodología o conocimiento de la mutación del código.
Un poco de estructura mejora todo en React.