Compartir Reducer

Clase 28 de 57 • Curso de Redux por Bedu

Sergio Castro

student•

También es recomendable hacer la verificación de datos en la pantalla de Usuarios

.
class Usuarios extends Component {
  
  componentDidMount(){    
    if (!this.props.usuarios.length){
      this.props.traerTodos()
    }
  }
.

Ricardo Marin

student•

Efectivamente, pero si el arreglo está vacío también debe mostrar que está vacío, porque el request fue exitoso, de lo contrario el usuario se va a quedar con una pantalla en blanco.

Jaime Gabriel González Célleri

student•

Con un componente funcional :)

import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import * as usersActions from '../../actions/usersActions'

const Posts = (props) =&gt; {

  useEffect(() =&gt; {
    if (!props.users.length) {
      props.getUsers()
    }
  })

  if (props.users.length === 0) {
    return &lt;h2&gt;Posts not found&lt;/h2&gt;
  }

  return (
    &lt;div&gt;
      &lt;h1&gt;Post&lt;/h1&gt;
      {console.log(props.users)}
      {props.match.params.key}
    &lt;/div&gt;
  )

}

const mapStateToProps = (reducers) =&gt; {
	return reducers.userReducer;
}

export default connect(mapStateToProps, usersActions)(Posts)

Wandy Rafael Santana Evangelista

student•

Hola Devs: -Aqui les traigo mi avance:

Si no hay usuarios lanza un error y da la opcion de ir al home.
Si hay usuario, muestra el nombre del usuario al que posteriormente seleccionamos.

Todo esto y mas con Redux y la magia de los Hooks. Les invito a pasarme por mi repositorio y ver mi propia solucion: Click Aqui *Pueden mandarme PR si asi desean! Recuerden, #NuncaParesDeAprender 💚

Cristhian Laurente López

student•

ahora todo tiene sentido - ahora si lo entiendo, aqui estudiandolo en un maraton de toda la noche jeje

Frank Antonio Piñin Ato

student•

Buen video mientras mas avanzo en el curso lo veo mas facil de entender.

Wilson Delgado

student•

Si, muy cierto se va desbloqueando el "diagrama" y poco a poco se va comprendiendo redux

Mariana Valencia Gallego

student•

Esta clase ayuda mucho a entender cómo funciona el estado del almacenamiento de Redux y cuándo un reducer tiene información o no.

Cristian Andres Ladino Peña

student•

Excelente clase. 💪

Jhon Alexander Romero Gonzaga

student•

Para quienes utilizan @reach/router y desean utilizar match del parametro deben hacer lo siguiente.

const Posts = props => {
  useEffect(() => {
    if (!props.users.length) {
      props.setInitialState()
    }
  }, [])

  return (
    <>
      <h1>Publicaciones de </h1>
      <h2>{props.postId}</h2>
    </>
  )
}

const mapState = state => {
  return {
    users: state.usersReducer.users
  }
}

export default connect(mapState, userActions)(Posts)```

Jhon Alexander Romero Gonzaga

student•

Estes es el App.js

const App = () => {
  return (
    <>
      <Menu />
      <Router>
        <Users path='/' />
        <Posts path='/posts/:postId' />
      </Router>
    </>
  )
}

export default App

Sebastian

student•

Nose si es un error pero cuando conecto Pub con el reducer de Users ya me trae los usuarios y no el estado inicial porque sucede esto?

Alex Abel Lerman

student•

Ocurre cuando recargas la pagina en el mismo componente, sin ir al detalle de post desde el ojito. Ahi es cuando aun no existen los usuarios

Andrés Felipe Eslava Zuluaga

student•

Comparto código al día del hoy del <Publications />

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withRouter } from "react-router";
import * as usersActions from '../../actions/components/usersActions';

class Publications extends Component {

  componentDidMount() {
    if (!this.props.users.length) {
      this.props.getUsers();
    }
  }

  render() {
    console.log(`this.props`, this.props)
    return (
      <div>
        {this.props.match.params.key}
      </div>
    )
  }
}

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

export default connect(mapStateToProps, usersActions)(withRouter(Publications));

Andrés Felipe Eslava Zuluaga

student•

Sucede que con withRouter() de react-router Se puede obtener acceso a las propiedades del objeto history y al objeto match del <Route> más cercano · Un objeto match contiene información sobre cómo una <Rout path> coincidió o matcheo con la URL.

withRouter pasará los props actualizados de match, location y history al componente empaquetado cada vez que ocurra un render.

Sebastian

student•

Tengo un pequeño error con la Ruta al irme a Pub y regreso a users se queda la ruta asi 'http://localhost:3000/posts/'

Manuel Rivera

student•

Manda screen de tu código, aunque creo que ese problema se presenta al momento de espécificar la ruta, asegurate de poner /Name_Rute , no olvides el /

Johan García Trejo

student•

Buen video

Juan Felipe Salamanca Gonzalez

student•

Buen vídeo, mientras mas avanzo mas entiendo y mas fácil se me hace

Paul Cortes

student•

Excelente clase magistral

softdynamic sac

student•

¿ Qué pasa si realmente no tengo usuarios ? ¿Se abriría un bucle infinito consultando por los usuarios?

Alan Alexis Arostegui Maranto

student•

Para eso manejamos los 3 casos: Si no regresa la petición porque está vació entonces caerá en el error que manejamos mediante los usersActions (en el catch)

Willy David Da Conceicao Lozada

student•

Amigo tienes que manejarlo porque La api te puede regresar un arreglo de datos vacíos, no necesariamente cae en el catch por si se pudo completar la petición HTTP exitosamente solo que me esta mandando nada la API, así que tienes que manejar los tres estados de una petición HTTP carga, error y datos (puede llegar con datos o sin datos)

Yo lo maneje así, en el componente usuarios en el ponerContenido() desde el action creator manda un arreglo vacio y no mandes datos Y entra en este condicional

// si los datos estan vacios
		if (this.props.usuarios.length === 0) {
			return (
				<div>
					<h3>No encontramos ningún Usuario</h3>
				</div>
			);
		}```

David Dias

student•

Excelente

import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import * as usersActions from '../../actions/usersActions'

const Posts = (props) =&gt; {

  useEffect(() =&gt; {
    if (!props.users.length) {
      props.getUsers()
    }
  })

  if (props.users.length === 0) {
    return &lt;h2&gt;Posts not found&lt;/h2&gt;
  }

  return (
    &lt;div&gt;
      &lt;h1&gt;Post&lt;/h1&gt;
      {console.log(props.users)}
      {props.match.params.key}
    &lt;/div&gt;
  )

}

const mapStateToProps = (reducers) =&gt; {
	return reducers.userReducer;
}

export default connect(mapStateToProps, usersActions)(Posts)

const Posts = props => {
  useEffect(() => {
    if (!props.users.length) {
      props.setInitialState()
    }
  }, [])

  return (
    <>
      <h1>Publicaciones de </h1>
      <h2>{props.postId}</h2>
    </>
  )
}

const mapState = state => {
  return {
    users: state.usersReducer.users
  }
}

export default connect(mapState, userActions)(Posts)```

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withRouter } from "react-router";
import * as usersActions from '../../actions/components/usersActions';

class Publications extends Component {

  componentDidMount() {
    if (!this.props.users.length) {
      this.props.getUsers();
    }
  }

  render() {
    console.log(`this.props`, this.props)
    return (
      <div>
        {this.props.match.params.key}
      </div>
    )
  }
}

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

export default connect(mapStateToProps, usersActions)(withRouter(Publications));

Compartir Reducer

Bienvenido al curso

Conoce a tu profesor y todo lo que aprenderás sobre Redux

¿Qué conocimientos me recomiendan para tomar este curso?

Repaso React

¿Qué es React y cómo funciona?

Preparando nuestro entorno de trabajo

Creación de la app con React

Agregando funciones a la app con React

Stateful vs Stateless

Ciclo de vida de React

Manejando promesas

React Router DOM

Introducción a Redux

¿Qúe es Redux, cuándo usarlo y por qué?

Fases de Redux

Introducción: las fases de Redux

Store

Reducers

Conexión a un componente

Action Creators

Redux Thunk

Explicación teórica: ciclo completo de Redux

Práctica: ciclo completo de Redux

Fases Extra

Archivos Types

Try Catch

Escenarios asíncronos

Componente Spinner

Componente Fatal

Tabla como componente

Compartir información en Redux

Introducción Compartir información en Redux

Parámetros por URL

Compartir Reducer

Múltiples Reducers

Llamando a múltiples reducers en una acción

Uso del estado en la acción

Evitar segundas búsquedas

Inmutabilidad

Evitar sobrescritura

Validación compuesta

Validación de errores

Modificando respuesta de url

Estado con interacción

Mostrar componentes dinámicamente

Llamadas asincronas dinámicas

Props por herencia vs estado

Estado compartido

Métodos HTTP

Introducción a métodos HTTP

Nuevo ciclo Redux

Normalizar datos

Mapear Objetos

Componente para agregar tarea

Manejar inputs con Reducer

POST

Deshabilitando botón

Redireccionar

Reutilizar componentes

PUT

DELETE

Últimos detalles

Conclusión

Conocimientos adquiridos

Qué hacer a continuación