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

Curso de Redux por Bedu

Curso de Redux por Bedu

Rodolfo Saldivar

Rodolfo Saldivar

Manejando promesas

9/57
Recursos
Transcripción

Una Promesa es un proxy para un valor no necesariamente conocido en el momento que es creada la promesa.

Las promesas tienen tres estados:

  • pending
  • fullfilled
  • rejected

Las promesas se invocan de la siguiente forma:

new  Promise( ( resolve, reject ) => {
// --- llamado asíncrono 
        if( todoOK ) { 
        // -- se ejecutó el llamado exitosamente resolve() }
        else { 
        // -- hubo un error en el llamado reject() 
        } 
} )

Aportes 32

Preguntas 3

Ordenar por:

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

Usando Hooks (y prettier):

import React, { useState, useEffect } from "react";
import axios from "axios";
const App = () => {
  const [usuarios, setUsuarios] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const { data } = await axios(
        "https://jsonplaceholder.typicode.com/users"
      );
      setUsuarios(data);
    }
    fetchData();
    console.log("primero se mostrara este texto");
  }, []);

  return (
    <div className="margen">
      <table className="tabla">
        <thead>
          <tr>
            <th>Nombre</th>
            <th>Correo</th>
            <th>Enlace</th>
          </tr>
        </thead>
        <tbody>
          {usuarios.map(item => (
            <tr>
              <td>{item.name}</td>
              <td>{item.email}</td>
              <td>{item.website}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default App;

Me gusta también utilizarlo con Hooks y con fetch:

Mi codigo 😎

import React, {useState, useEffect} from 'react';

const App = () => {
    const [state, setState] = useState({
        users: [ ]
    });

    useEffect(() => {
        fetchData();
    }, [])

    const fetchData = async () => {
        try {
            const response = await fetch('https://jsonplaceholder.typicode.com/users');
            const data = await response.json();
            setState({users: data});
        } catch (error) {
            console.error(new Error(error));
        }
    }

    const putRows = () => (
        state.users.map((user) => (
            <tr key={user.id}>
                <td>{user.name}</td>
                <td>{user.email}</td>
                <td>{user.website}</td>
            </tr>
        ))
    );

Otra forma de manejar la promesa en vez de usar async / await es resolverla con then / catch. El código quedaría así:

componentDidMount() {
	axios.get('https://jsonplaceholder.typicode.com/users')
	.then((respuesta) => { // si no hay errores
		this.setState({
			usuarios: respuesta.data,
		})
	})
	.catch(error => {
		// aquí manejamos el error a nuestro gusto
		console.log(error);
	});
}

Ejemplo usando hooks

`import React, { useState, useEffect } from "react";
import axios from "axios";

const App = () => {
  const [usuarios, setUsuarios] = useState([]);

  const obtenerUsuarios = async () => {
    const respuesta = await axios.get(
      "https://jsonplaceholder.typicode.com/users"
    );
    setUsuarios(respuesta.data);
  };

  useEffect(() => {
    obtenerUsuarios();
  }, []);

  const ponerFilas = () =>
    usuarios.map((usuario) => (
      <tr key={usuario.id}>
        <td>{usuario.name}</td>
        <td>{usuario.email}</td>
        <td>{usuario.website}</td>
      </tr>
    ));

  return (
    <div className="margen">
      <table className="tabla">
        <thead>
          <tr>
            <th>Nombre</th>
            <th>Correo</th>
            <th>Enlace</th>
          </tr>
        </thead>
        <tbody>{ponerFilas()}</tbody>
      </table>
    </div>
  );
};

export default App;

Excelente estas clases de repaso antes de comenzar con Redux.

ejemplo usando fetch


    async componentDidMount(){
      let url = 'https://jsonplaceholder.typicode.com/users';
      const data = await fetch(url).then(response => response.json());
      console.log(data)
   }

excelente clase

Estas clases de repaso de React me han encantado,. Y aunque ahora usamos hooks es muy bueno conocer y entender esta sintaxis. Excelente profesor.

import React from 'react';
import axios from 'axios';


class App extends React.Component {
  constructor() {
    super();
    this.state = {
      users: []
    }
    
    this.API_URL = 'https://jsonplaceholder.typicode.com/users';
  }
  
  async componentDidMount() {
    const response = await axios.get(this.API_URL);
    this.setState({users: response.data});
  }

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

  render() {

    console.log(`users`, this.state.users)
    return (
    <table className="App">
      <thead>
        <tr>
          <th>
            Nombre
          </th>
          <th>
            Correo
          </th>
          <th>
            Enlace
          </th>
        </tr>
      </thead>
      <tbody>
        {this.makeRows()}
      </tbody>
    </table>
    );
  }
}

export default App;

Hay un problema con usar this.setState en componentDidMount(), no compila.

Mi forma de abordarlo es declarar un método de la clase App exclusivo para actualizar el estado de Users. Y llamarlo dentro de la función componentDidMount(),

Este es mi código:

import React, { Component } from 'react';
import axios from 'axios';

class App extends Component {

  constructor() {
    super();
    this.state = {
      users: [],
    };
  }

  updateState(data) {
    this.setState({
      users: data,
    });
  }

  async componentDidMount() {
    const response = await axios.get('https://jsonplaceholder.typicode.com/users');
    console.log(response);

    this.updateState(response.data);
  }

  pushData() {
    const { users } = this.state;

    return (
      users.map(({ id, name, email, website }) => (
        <tr key={id}>
          <td>{name}</td>
          <td>{email}</td>
          <td>{website}</td>
        </tr>
      ))
    );
  }

  render() {
    return (
      <div className='margin'>
        <table className='tabla'>
          <thead>
            <tr>
              <td>Nombre</td>
              <td>Email</td>
              <td>Enlace</td>
            </tr>
          </thead>
          <tbody>
            {this.pushData()}
          </tbody>
        </table>
      </div>
    );
  }

};

export default App;


Usando axios, async await y hooks:

import React, { useState, useEffect } from 'react'
import axios from 'axios'

const App = () => {
  const [users, setUsers] = useState([])

  useEffect(() => {
    async function fetchUsers() {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/users')
        setUsers(response.data)
      } catch (error) {
        console.error(error)
      }
    }
    fetchUsers()
  }, [])

    return (
      <div className="margen">
        <table className="tabla">
        <thead>
          <tr>
            <th>Name</th>
            <th>Correo</th>
            <th>Enlace</th>
          </tr>
        </thead>
        <tbody>
          {users.map(user => (
            <tr key = {user.id} >
              <td>{user.name}</td>
              <td>{user.email}</td>
              <td>{user.website}</td>
            </tr>
          ))}
        </tbody>
      </table>
      </div>
    )
}

export default App

Con hooks lo hice de esta manera

import React, { useState , useEffect} from 'react';
import axios from 'axios';

const App = () => {

  const [data, setData] = useState([]);

  useEffect(() => {
    axios
      .get('https://jsonplaceholder.typicode.com/users')
      .then(response => setData(response.data))
  }, [])

  
    return (
      <div className="margen">
        <table className="tabla">
          <thead>
            <tr>
              <th>
                Nombre  
              </th>
              <th>
                Correo
              </th>
              <th>
                Enlace
              </th>
            </tr>
          </thead>
  
          <tbody>
            {data.map((usuario) => (
              <tr key={usuario.id}>
                <td>
                  {usuario.name}
                </td>
                <td>
                  {usuario.email}
                </td>
                <td>
                  {usuario.website}
                </td>
              </tr>
            ))}
            
          </tbody>
        </table>
      </div>
    );
}


export default App;

Manera pulcra de explicar

Si lo prefieren con Hooks y fetch

  const [usuarios, setUsuarios] = useState([])
  useEffect(()=> {
        async function getUsers() {
        const response = await fetch('https://jsonplaceholder.typicode.com/users')
        const results = await response.json()
        setUsuarios(results)
      }
      getUsers()
    },[]
  )
import React,{useState,useEffect} from 'react'
import './App.css'

const App=()=>{
    const [usuarios,setUsuario]=useState([])
    const [error,setError]=useState(false)
    const [isLoaded,setIsLoaded]=useState(true)
    
   async function DataConection(event) {
    await fetch('https://jsonplaceholder.typicode.com/users')
    .then(res => res.json())
    .then(
        (result)=> {
            setUsuario(result)
            setIsLoaded(false)
        },
        (err)=>{
            setIsLoaded(false)
            setError(err)
        }
    )
    
    }
    
    useEffect(()=>{
        DataConection()
    },[])
    console.log(usuarios);

    

    if (error) {
        return(
        <div>Error:{error.message}</div>
        )
    }else if (isLoaded) {
        return(
            <div>Loading ...</div>
        )
    }
    else{
     return (
          
            <div className="margin">
                  {/* <button onClick={()=>DataConection()}>Load More</button> */}
                <table className="table">
                    <thead className="">
                        <tr>
                            <th>nombre</th>
                            <th>correo</th>
                            <th>UserName</th>
                        </tr>
                    </thead>
                    <tbody>
                       
    
                            {
                            usuarios.map(item => (
                                 <tr>
                                    <td key={item.name}>
                                        {item.name}  
                                </td>
                                <td >
                                         {item.email}
                                
                                </td>
                                  <td >
                                        {item.username}
                                
                                </td>
                                </tr>
                            ))}
                            
                            
                        
                    </tbody>
                </table>
            </div>
            
          );
    
    }
       
    }

export default App

Exelente clase

Excelente clase!

Excelente

Excelente clase. 🙂

Muy buena clase profesor.

Muy bueno rodolfitooo

Excelente nos muestra como usar correctamente la data desde una API, genial

ecoooo

Nunca se olviden de usar los key al recorrer un arreglo 🧐

Los key son muy importante cuando trabajamos con arrays, para que cada elemento de nuestro array tenga un identificador único.

gracias

  componentDidMount() {
    this.fetchData();
  }

  async fetchData() {
    const response = await axios.get(
      "https://jsonplaceholder.typicode.com/users"
    );
    this.setState({
      usuarios: response.data,
    });
  }

Si alguno tiene dudas con axios , le dejo un lectura de DO https://www.digitalocean.com/community/tutorials/react-axios-react-es

Yo lo hice al estilo de la carrera de JS. Si por alguna razón no se hace GET de la API, se renderiza el initialState que contiene los datos dummy que pusimos al principio. Estoy atento a sus correcciones!

import React, { Component } from "react";
import axios from 'axios';

import initialState from "./initialState.json"

class App extends Component {
  constructor() {
    super();
    this.state = {users: []};
  }

  addRows = () => (
    this.state.users.map((user) => (
      <tr key={ user.id }>
        <td>
          { user.name }
        </td>

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

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

  async componentDidMount() {
    try {
      let userList = await axios({
        url: 'https://jsonplaceholder.typicode.com/users',
        method: 'GET'
      });
      this.setState({
        users: userList.data
      })
    } catch (err) {
      console.log(err);
      this.setState(initialState)
    }
  }

  render() {
    return (
      <div className="margin">
        <table className="table">
          <thead>
            <tr>
              <th>Nombre</th>

              <th>Correo</th>

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

          <tbody>
            { this.addRows() }
          </tbody>
        </table>
      </div>
    );
  }
};

export default App;

excelente clase