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

Stateful vs Stateless

7/57
Recursos
Transcripci贸n

Los componentes no funcionales no manejan estado, solo manejan informaci贸n y funciones.

Los componentes de clases manejan un estado interno, informaci贸n y funciones, no hace falta definir las funciones con const simplemente con el nombre de la funci贸n ya lo detecta.

Aportes 58

Preguntas 4

Ordenar por:

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

La forma en que entendemos los componentes Stateful y Stateless cambia totalmente con los React Hooks: https://es.reactjs.org/docs/hooks-intro.html 馃槷
.
Ahora tambi茅n tenemos estado y ciclos de vida en componentes creados como funciones o arrow functions.
.
Esto significa que al determinar qu茅 componentes ser谩n l贸gicos o presentacionales debemos guiarnos por convenciones y decisiones del equipo, no de que los componentes hayan sido creados como clases o funciones.
.
驴Cu谩ndo crear un Componente?
Estructura, Organizaci贸n y Tipos de Componentes en React

Sugiero seguir con el curso, realizando las implementaciones con Hooks, es mucho mas conciso. Hasta Aqui mi codigo :

import React, { useState } from "react";

const App = () => {
  const [usuarios, setUsuarios] = useState([
    { name: "Rodolfo", email: "[email protected]", enlace: "Rodolfo.com" },
    { name: "Platzi", email: "[email protected]", enlace: "platzi.com" }
  ]);

  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.enlace}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default App;

Aclaro que soy bastante jr. pero recomiendo este ejercicio:

1- ver esta clase y tomar nota + hacer el c贸digo con el profe.
2- una vez terminada la clase y verificar que tu c贸digo funciona, borrar todo el archivo para intentar escribirlo solo (y encontrarte con tu propio 鈥測o鈥).
3- no me sali贸 hasta el 6to intento por lo que tuve que recurrir al archivo que hay en la pesta帽a de enlaces de esta clase y revisar mis errores hasta incorporar todos los detalles de la sintaxis.</h1>

Esto se me ocurri贸 xq cuando llegu茅 a la mitad del curso donde ya se trabaja combinando reducers me costaba bastante entender la conectividad del c贸digo, y me dije 鈥渁 repasar鈥.

Para aclarar un poco, desde la version de React 16.8 en adelante, los componentes funcionales si pueden manejar estado y el ciclo de vida, utilizando React Hooks
Otra cosa, es un curso de Redux no de React, parece mas clase de react que de Redux.
Espero que mejore, redux se puede utilizar con Vanilla.js y tambien se puede combinar con otros framework鈥 da a entender que solo funciona con React.

Tambien puedes declarar el state afuera si dentro del constructor no vas a realizar ninguna otra operaci贸n o declarar los bind.

class App extends Component {
state = {
	usuarios : []
}

Recomiendo tambien tener el inspect abierto, esta generando un warning
Check the render method ofApp. See https://fb.me/react-warning-keys for more information.

se puede solucionar con algo tan sencillo como

ponerFilas = () => this.state.usuarios.map((usuario, index) => (
		<tr key={index}>

Todo iba bien gasta que metieron clases馃ぎ馃ぎ馃ぎ

const = stateless

  • NO manejan estado
  • solo manejan informacion
  • solo manejan funciones
import React from 'react';

const App = () => {
	 return() 
}

class= statefull

  • Manejan estado
  • usa render
  • usa estado = this this.state
import React, { Component } from 'react';
class App extends Component {
	 render() {
		return ()
	}

Ac谩 encuentran el proyecto en Github: https://github.com/RodolfoSaldivar/BlogPlatzi

el codigo de la clase con componente funcional y hooks

import React, {useState} from 'react';
import './styles/App.css';

const App = () => {
  const initialState=[{
    nombre:'DIEGO ANDRES GUZMAN',
    correo:'[email protected]',
    enlace:'nova.com'
  },{
    nombre:'Marcos Manuel MOlano',
    correo:'[email protected]',
    enlace:'mmmS.com'
  }]
  const [state,changeState]=useState(initialState)

  return (
    <div className="margen">
      <table className="tabla">
        <thead>
          <tr>
            <th>Nombre</th>
            <th>Correo</th>
            <th>Enlace</th>
          </tr>
        </thead>
        <tbody>
          {state.map((usuario,index)=>( 
            <tr key={index}>
              <td>{usuario.nombre}</td>
              <td>{usuario.correo}</td>
              <td>{usuario.enlace}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default App;

Hice el ejercicio con Hooks, es muchisimo mas facil de entender y manejar, lo recomiendo.
Por si preguntan, estoy consumiendo la data de un archivo .json y colocandolo en el estado del componente mediante Hooks.

Me encanta como explica, y te dice que hacer por favor borra lo que esta hasta la flecha. super did谩ctico y f谩cil de seguir. 馃憤

Excelente clase. 馃檪 se sienten m谩s frescos los conceptos vistos en el curso de react.

Si no imporatmos {Component} entoces se usa:
class App extends React.Component?

Que bien explica el profesor 馃憤

Para quien quiera probar el c贸digo en un componente funcional (Stateless)

import React, { useState } from "react";

const App = () => {
  const [users, setUsers] = useState([
    {
      name: "Marlon",
      email: "[email protected]",
      link: "marlon.com",
    },
    {
      name: "Platzi",
      email: "[email protected]",
      link: "platzi.com",
    },
  ]);

  const rows = () =>
    users.map((user) => (
      <tr>
        <td>{user.name}</td>
        <td>{user.email}</td>
        <td>{user.link}</td>
      </tr>
    ));

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

export default App;

talvez este curso deba volver a realizarse pues muchas cosas ya cambiaron, se que antes los componentes que requer铆an un estado se creaban por medio de clases, pero con la llegada de los hooks los componentes funcionales tambi茅n pueden manejar estados, y decir que un componente es stateful solo por ser definido por una clase ya no es muy certero.

Me alegra que React haya evolucionado y dejado atr谩s esto de las Class components. Esta bien conocerlas de todas maneras, pero vamos, las functional components tienen mejor estilo y son m谩s fluidas para trabajar XD

import React, { useState } from "react";
import db from "../db.json";

const App = () => {
  const [users] = useState(db);

  return (
    <div className="margin">
      <table className="table">
        <thead>
          <tr>
            <th>Nombre</th>
            <th>Correo</th>
            <th>Enlace</th>
          </tr>
        </thead>
        <tbody>
          {users.data === undefined || users.data.length === 0 ? (
            <tr>
              <td colSpan="3" className="no-data">
                No hay datos
              </td>
            </tr>
          ) : (
            users.data.map((user, i) => (
              <tr key={i}>
                <td>{user.name}</td>
                <td>{user.email}</td>
                <td>{user.domain}</td>
              </tr>
            ))
          )}
        </tbody>
      </table>
    </div>
  );
};

export default App;

El profesor me gusta mucho por que entiende que no a todos se les facilita mucho y va paso a paso y es claro.

No necesariamente un componente funcional empieza por const, pues puede ser resuelto devolviendo una funci贸n an贸nima, o creando una funci贸n a la antigua.

Funciones declaradas, y expresiones de funci贸n tambi茅n son v谩lidas para crear el componente.

Es un poco decepcionante que a estas alturas (refiri茅ndome a la actual versi贸n de React) use Class Components en vez de Functions Components para este curso

Excelente clase. Mi archivo App.js

import React, { Component } from 'react';

class App extends Component {
	constructor() {
		super();
		this.state = {
			users: [
				{
					name: 'Andres',
					email: '[email protected]',
					webpage: 'andrescampuzano.com',
				},
				{
					name: 'Platzi',
					email: '[email protected]',
					webpage: 'platzi.com',
				},
			],
		};
	}

	setRows = () =>
		this.state.users.map((user) => (
			<tr>
				<td>{user.name}</td>
				<td>{user.email}</td>
				<td>{user.webpage}</td>
			</tr>
		));

	render() {
		return (
			<div className='margen'>
				<table className='table'>
					<thead>
						<tr>
							<th>Name</th>
							<th>Email</th>
							<th>Web Page</th>
						</tr>
					</thead>
					<tbody>{this.setRows()}</tbody>
				</table>
			</div>
		);
	}
}

export default App;

Un 10 Rodolfo!

o tambien puede ser

import React from 'react'

class App extends React.Component { ...}

Yo lo hice creando un componente que me genere esa lista de la data

Stateful son componentes clases(no funcionales).
Stateless son componentes funcionales.
Las funcionales: manejan estados.
Las no funcionales: no manejan estado solo manejan informacion.

excelente forma de ense帽ar paso a paso y la refactorizaci贸n

ponerFilas = () => (
    this.state.usuarios.map((usuario)=> (
      <tr>
        <td>{ usuario.nombre }</td>
        <td>{ usuario.correo }</td>
        <td>{ usuario.enlace }</td>
      </tr>
    ))
  );

Todos los que empiecen con ```
const y nombre del componente

son stateless o componentes funcionales

Diferencia entre componentes funcionales y no funcionales: Funcionales: Manejan estados No funcionales: No manejan estados, s贸lo informaci贸n

tal vez a alguien le guste asi directo con hooks

import { useState } from "react";
const initialState = [
  { name: "Carlos", email: "[email protected]", domain: "sonne.io" },
  { name: "Sol", email: "[email protected]", domain: "sonne.com" }
];
function App() {
const [users, setUsers] = useState(initialState)
 
  const renderRows = () => {
    return users.map((item) => {
      const {name,email,domain}= item;
      return (
        <tr>
          <td>{name}</td>
          <td>{email}</td>
          <td>{domain}</td>
        </tr>
      );
    });
  };
  return (
    <div className="container">
      <table className="container_table">
        <thead>
          <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Link</th>
          </tr>
        </thead>
        <tbody >
         {renderRows()}
        </tbody>
      </table>
    </div>
  );
}

export default App;

Componentes con estado y sin estado
Los componentes con estado y sin estado tienen muchos nombres diferentes.

Tambi茅n se les conoce como:

  • Contenedor vs componentes de presentaci贸n

  • Componentes inteligentes vs tontos

La diferencia literal es que uno tiene estado y el otro no. Eso significa que los componentes con estado realizan un seguimiento de los datos cambiantes, mientras que los componentes sin estado imprimen lo que se les da a trav茅s de accesorios, o siempre representan lo mismo.

Componente con estado / contenedor / inteligente:

class Main extends Component {
constructor() {
super()
this.state = {
books: []
}
}
render() {
<BooksList books={this.state.books} />
}
}
Componente sin estado / presentacional / tonto:

const BooksList = ({books}) => {
return (
<ul>
{books.map(book => {
return <li>book</li>
})}
</ul>
)
}
Observe que el componente sin estado se escribe como una funci贸n. Por muy interesante que sea el estado, siempre debe apuntar a hacer que sus componentes sean lo m谩s simples y sin estado posible, de modo que los diferentes componentes se puedan reutilizar como piezas de Lego, incluso si no tiene planes inmediatos para reutilizar un componente. 隆Los con estado deber铆an sentirse afortunados de serlo!
https://programmingwithmosh.com/javascript/stateful-stateless-components-react/

ojo tome iniciativa de otro estudiante

Me habr铆a gustado que esta clase la hubiese hecho usando Hooks 馃槮

No sab铆a que se pod铆a utilizar par茅ntesis en vez de llaves para definir el alcance o entorno de la funci贸n 馃槄.

Que agradable sujeto

Prefiero trabajar con Functions Components, no hay problema de contexto con el this y el codigo es mal legrible 馃槂

porque el tab antes de cortar?

Que excelente curso para complementar y aclarar un poco las dudas del curso de React

驴Es necesario usar clases para trabajar con Redux?
Porque si es para tener componentes con estado yo uso Hooks en componentes funcionales, hacen que el c贸digo sea m谩s limpio y son m谩s f谩ciles de usar.

Muy buena la clase. Cada ves se pone mejor.

Genialmete explicado! S煤per claro!

Excelente curso para complementar y aclarar un poco las dudas del curso de React

Excelente clase, aclar茅 inclusive conceptos de los cursos anteriores de React. 馃槃

Muy Practico

Cual es la diferencia entre useState y utilizar los estados de esa forma?

tambi茅n podemos hacer class App extends React.Component {} sin la necesidad de importar { Component }

<h1>Stateful vs Stateless</h1>

Los componentes no funcionales no manejan estado, solo manejan informaci贸n y funciones.

Los componentes de clases manejan un estado interno, informaci贸n y funciones, no hace falta definir las funciones con const simplemente con el nombre de la funci贸n ya lo detecta.

genial curso !! clse, voy comprendiendo conceptos que no termine de comprender en los cursos de react.

Seg煤n lo que entend铆 los componentes funcionales son los que declaramos como funciones y no manejan estado, pero al principio de la clase se explic贸 que los no funcionales son los que no manejan estado, solo manejan informaci贸n y funciones.
Es decir, tengo una confusi贸n entre si el funcional o no funcional son lo mismo, porque esa fue mi impresi贸n.

Gracias por esta clase, la necesitaba

Excelente

Stateless es un componente de tipo funcion no maneja estado, Statefull es de tipo clase y si maneja estados y constructor


Super que explicado, buen profesor.
Pos si no sab铆an, para comentar en .jsx -> {/comentario/}. En cualquier parte del c贸digo pueden ponerlo.

aqui mi codigo usando hooks

import React, {useState} from 'react';

const App = () => {

const [usuarios, setUsuarios] = useState([
  
    
      {
        nombre: "camilo",
        correo: "[email protected]",
        blog: "camilo.com",
      },
      {
        nombre: "camilo",
        correo: "[email protected]",
        blog: "camilo.com",
      },
    
  
]);

  const ponerFilas = ()=>(
    usuarios.map((item)=>(
    <tr>
      <td>{item.nombre}</td>
      <td>{item.correo}</td>
      <td>{item.blog}</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;```
Yo uso una un fetch y al momento de hacer .map no se renderiza, como si no existiera la propiedad .map pero voy a las propiedades y ah铆 esta

Parece magia pero es react.

gracias

interesante la forma de retornar un array e imprimir dentro de la tabla, imprimir una variable que contiene un array!!
que mas nos tienes escondido por ahi, ense帽alo todo lo que sabes !! 馃榿