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

Parámetros por URL

27/57
Recursos

Aportes 29

Preguntas 8

Ordenar por:

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

Aprendiendo mucho! Tambien pueden utilizar los iconos de fontawesome instalando:

npm install --save-dev @fortawesome/fontawesome-free```

y luego haciendo un import

import “@fortawesome/fontawesome-free/css/all.css”;

y luego utilizan el icono que deseen:


<i className=“fas fa-eye”></i>```

Por si alguien quiere utilizar hooks de react router

import React from 'react';
import { useParams } from 'react-router-dom';

const Posts = () => {
    const { key } = useParams();
    return (<div>{key}</div>);
};

export default Posts;```

Esta libreria tambien es muy buena https://react-icons.netlify.com

En lugar de hacer lo que hace Rodolfo en el min 8:39, lo mejor seria usar useParams, que hace parte de la libreria de react-router y es muy simple: ya que params siempre devuelve el id posicionado.

import React from "react";
import { useParams } from "react-router";
const Publications = () => {
  const params = useParams();
  console.log(params);
  return (
    <div>
      <h2> {params.id}</h2>
    </div>
  );
};

export default Publications;

Sería bueno que ya se actualizara el curso de Redux con Redux Hooks y sin Component.

Para los que no les funciona la forma de obtener el valor de key, debido a las actualizaciones que ha tenido React, esta es un manera de hacerlo usando useParams.

import * as usuariosActions from '../../actions/usuariosActions';
import * as publicacionesActions from '../../actions/publicacionesActions';

import { useParams } from "react-router-dom";

function withParams(Component) {
	return props => <Component {...props} params={useParams()} />;
}

class Publicaciones extends Component {

	render() {			
		return (
			<div>			
				{this.props.params.key}               
			</div>
		);
	}
}

export default withParams(Publicaciones);

alt + 96 para las comillas ( ` )

¿Por qué cuando importa un componente; por ejemplo, Publications, no coloca la ruta completa sino solo el nombre de la carpeta?

Hola Devs:
-Asi llevo mi Post Section:

“Les recomiendo trabajar en base a funciones y manejar el estado mediante Hooks, es como le he estado haciendo, termino siempre con un codigo mas limpio”.
Pueden checar mi repositorio del proyecto aqui: Click Aqui

Recuerden, #NuncaParesDeAprender 💚

hola, si alguien mas no entendio mucho lo del final “{this.props.match.params.key}” dejenme decirles que yo tmpoco jajaj pero!.. le busque la lógica y si le cambian el nombre al route que pasa la variable “:key” tendrán que cambiar el valor final… es decir si le pongo por ejemplo “:publi” en la llamada seria: “{this.props.match.params.publi}” siguiendo esta lógica quien le pasa el parametro por props es el route! de nada! 😄 pd: los profesores de platzi no deberían asumir que uno sabe ya de antemano algo y eso que llevo siguiendo la ruta de aprendizaje y deberían explicar mas a detalle para una mejor comprensión de lo que se estudia (consejo o sugerencia)

Me encanto cssicon.space , muchas gracias por la información

Params es un props que nos enviá react router y así podemos obtener la varable que hemos especificado en la URL o ruta

acento invertido es con alt+96 si no lo ven en el techado

Al día de hoy, si intentas realizar esto, params te arroja error. Ocurre por estar manejando Class Components Pero no hay nada de qué preocuparse, con react-router se soluciona.
El código en publicaciones queda así:

import React, { Component } from 'react';
import { withRouter } from "react-router";

class Publications extends Component {
  
  render() {
    return (
      <div>
        {this.props.match.params.key}
      </div>
    )
  }
}

export default withRouter(Publications);

También puedes obtener información sobre cualquier location, match, o history utilizando withRouter. Todos se pasan bajo this.props

Estoy siguiendo el curso en 2022, react router ha tenido mas actualizaciones, para acceder a los parametros que vienen por el URL debemos hacer asi:

import {useParams} from "react-router-dom";

Y ya dentro del codigo podemos hacer asi para acceder a los parametros:

        return (
            <>
                <h1>Post del usuario id {params.key}</h1>
                <h2>Name: {props.usersReducer.users[params.key].name}</h2>
            </>
        )

Parámetros por URL

Iconos - CSS ICON animate

Creamos la carpeta “Publicaciones” dentro de “components”:

Dentro de ella tendremos el archivo index.js:

import React, { Component } from 'react'

export default class Publicaciones extends Component {
  render() {
    return (
      <div>
        { this.props.match.params.key }
        {/*  Usamos this porque es una clase */}
      </div>
    )
  }
}

Conseguimos un CSS como icono:

<div className="eye-solid icon"></div>
.eye-solid.icon {
  color: #000;
  /* position: absolute; */
  margin-left: 3px;
  margin-top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 70% 15%;
  border: solid 1px currentColor;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.eye-solid.icon:before {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: solid 1px currentColor;
  background-color: currentColor;
}

Usaremos esto en la tabla.js.

Creamos una nueva ruta en el index.js de src:

<Route exact path="/publicaciones/:key" component = {Publicaciones} />

Con el :key indicamos que ese parámetro se pasará por la URL.

No entiendo ese parametro que recibe map , de donde sale ? Lo trae map siempre por defecto ?

Genial !

Excelente clase. 🙂

Excelente Clase

Excelente clase!

Me gusto la clase

Cuando pongo { key } en el <td> o dentro de <Link> me da error. Dice que no existe, que no está definido. En cambio, si le pongo usuario.id ahí si funciona.

Excelente clase ! Nuevamente

como dato .map recive 3 parametros :
usuarios.map(usuario, posicionDelUsuario , arregloOriginal )

Excelente forma de obtener parámetros por URL

       { this.props.match.params.key }