Modificando respuesta de url

Clase 37 de 57 • Curso de Redux por Bedu

Contenido del curso

Bienvenido al curso

Repaso React

Introducción a Redux

11
¿Qúe es Redux, cuándo usarlo y por qué?
00:15 min

Fases de Redux

Fases Extra

Compartir información en Redux

Métodos HTTP

Conclusión

Tomar examen

Juan Felipe Salamanca Gonzalez

student•

Cuando puse el alert en el publicacionesAction se me duplico y me salen dos alertas las del numero 0 y una undefined ¿Que puedo hacer para solucionarlo?

Este es mi codigo del publicacionesAction

import axios from 'axios'
import { TRAER_POR_USUARIO, ERROR} from '../types/publicacionesTypes' 
import *as usuariosTypes from '../types/usuariosTypes'

const { TRAER_TODOS: USUARIOS_TRAER_TODOS} =usuariosTypes
export const traerPorUsuario = (key) => async(dispatch, getState) =>{
  const {usuarios} = getState().usuariosReducer
  const {publicaciones} = getState().publicacionesReducer
  const usuario_id = usuarios[key].id
  try{
    const respuesta = await axios.get(`https://jsonplaceholder.typicode.com/posts?userId=${usuario_id}`)
    
    const nuevas = respuesta.data.map((publicacion) =>({
      ...publicacion,
      comentarios: [],
      abierto: false
    }))
    
    const publicaciones_actualizadas = [
      ...publicaciones,
      nuevas
    ]
    dispatch({
      type: TRAER_POR_USUARIO,
      payload: publicaciones_actualizadas
    })

    const publicaciones_key = publicaciones_actualizadas.length -1;
    const usuarios_atualizados = [...usuarios]
    usuarios_atualizados[key] = {
      ...usuarios[key],
      publicaciones_key
    }

    dispatch({
      type: USUARIOS_TRAER_TODOS,
      payload: usuarios_atualizados
    })
  }
  catch(error){
    console.error("Error", error.message);
    dispatch({
      type: ERROR,
      payload: 'Publicaciones no disponible'
    })
  }
}

export const abrirCerrar = (pub_key, com_key) => (dispatch) => {
  console.log(pub_key, com_key)
}

y este es el codigo del index.js de publicaciones

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Loader from '../General/Loader';
import Fatal from '../General/Fatal';

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

const { traerTodos: usuariosTraerTodos } = usuariosActions;
const { traerPorUsuario: publicacionesTraerPorUsuario,abrirCerrar } = publicacionesActions;

class Publicaciones extends Component {

	async componentDidMount() {
		const {
			usuariosTraerTodos,
			match: { params: { key } },
			publicacionesTraerPorUsuario
		} = this.props;

		if (!this.props.usuariosReducer.usuarios.length) {
			await usuariosTraerTodos();
		}
		if (this.props.usuariosReducer.error) {
			return;
		}
		if (!('publicaciones_key' in this.props.usuariosReducer.usuarios[key])) {
			await publicacionesTraerPorUsuario(key);
		}
	}

	ponerUsuario = () => {
		const {
			match: { params: { key } },
			usuariosReducer
		} = this.props;

		if (usuariosReducer.error) {
			return <Fatal mensaje={ usuariosReducer.error } />;
		}
		if (!usuariosReducer.usuarios.length || usuariosReducer.cargando) {
			return <Loader />
		}

		const nombre = usuariosReducer.usuarios[key].name;

		return (
			<h1>
				Publicaciones de { nombre }
			</h1>
		);
	};

	ponerPublicaciones = () => {
		const {
			usuariosReducer,
			usuariosReducer: { usuarios },
			publicacionesReducer,
			publicacionesReducer: { publicaciones },
			match: { params: { key } }
		} = this.props;

		if (!usuarios.length) return;
		if (usuariosReducer.error) return;
		if (publicacionesReducer.cargando) {
			return <Loader />;
		}
		if (publicacionesReducer.error) {
			return <Fatal mensaje={ publicacionesReducer.error } />
		}
		if (!publicaciones.length) return;
		if (!('publicaciones_key' in usuarios[key])) return;

		const { publicaciones_key } = usuarios[key];
		return this.mostrarInfo(
      publicaciones[publicaciones_key],
      publicaciones_key
    )
	};

  mostrarInfo = (publicaciones, pub_key) => (
    publicaciones.map((publicacion, com_key) => (
			<div
				key={publicacion.id}
				className='pub_titulo'
				onClick={ ()=>alert(this.props.abrirCerrar(pub_key, com_key)) }
			>
				<h2>
					{ publicacion.title }
				</h2>
				<h3>
					{ publicacion.body }
				</h3>
			</div>
		))
  )
	render() {
		return (
			<div>
				{ this.ponerUsuario() }
				{ this.ponerPublicaciones() }
			</div>
		);
	}
}

const mapStateToProps = ({ usuariosReducer, publicacionesReducer }) => {
	return { usuariosReducer, publicacionesReducer };
};

const mapDispatchToProps = {
	usuariosTraerTodos,
  publicacionesTraerPorUsuario,
  abrirCerrar
};

export default connect(mapStateToProps, mapDispatchToProps)(Publicaciones);

Jonathan Forero

student•

Remueve el alert del onClick que está dentro de la funcion mostrarInfo.

Antes:

onClick={ ()=&gt;alert(this.props.abrirCerrar(pub_key, com_key)) }

Después:

onClick = { () =&gt; this.props.abrirCerrar(pub_key, com_key) }

Willy David Da Conceicao Lozada

horacio garcia

Andrés Felipe Eslava Zuluaga

Roberto S. Sampayo

Mario Abraham Ochoa Tovar

Byron Mesias Cueva Cabrera

David Dias

Frank Antonio Piñin Ato

Alvaro Garracini

Cristian Caballero

Cristian Andres Ladino Peña

Wandy Rafael Santana Evangelista

Paul Cortes

Johan García Trejo

Manuel Rivera

Irungaray Agustin

Modificando respuesta de url

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