Llamando a múltiples reducers en una acción

Clase 30 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

Comentarios

Iván Darío Sánchez Jiménez

student•

Un consejo para quienes opinan que era mejor cambiar los nombres de los actions desde un principio, aunque es la solución mas facil para evitarse este tipo de ambiguedades, creo que es una gran oportunidad para aprender a resolver este tipo de situaciones cuando esto sucedan.

Si lo ven como si siempre fueran a trabajar desarrollos propios vale, pero si llegan a un equipo de desarrollo van a llegar muchas veces a trabajar sobre ciertas reglas de referenciación o manteniendo código de otros desarrolladores y parte del estandar es programar todo en inglés lo que aumenta la probabilidad de encontrarse la función getAll() para la obtención de múltiples recursos y no va a ser el único caso, así que es bueno saber como solucionar este problema.

René Sanchez

student•

Lo mas extraño que he encontrado es que la propia api puedes buscar la informacion de un usuario especifico por el id y tambien los post

No estoy viendo muchas relevancia en este caso por que esta fuera de contexto y estaria bien si creamos un componente para traer todos los usuarios y tambien todas las publicaciones publicaciones con varias funcionalidades Aun que esta interesante la forma de resolver este tipo de casos por funcionalidades y ya cositas un poco avanzadas de js para cambiar los nombres cuando se lleguen a necesitar

Miguel Prada

student•

Haters gonna hate

Ivan Bazaldua

student•

Hola, también encontré un poco confusa esta clase, creo que para alguien sin mucha experiencia en Redux (como yo) sería mas fácil comenzar con nombres diferentes tanto en las funciones exportadas en los Actions así como nombrar diferente los casos en los reducers. La diferencia seria importes desestructurados en lugar de import * as .... y tener que usar mapDispatchToProps incluso si solo hay uno. (ver código de Usuarios/index.js)

Les dejo el código para que lo vean y (espero) se entienda mejor. En lo personal encuentro esta manera más fácil de digerir pero es bueno conocer diferentes aproximaciones!!.

// publicationsTypes.js

export const GET_PUBLICATIONS = &quot;get_publications&quot;;
export const LOADING = &quot;loading&quot;;
export const ERROR = &quot;error&quot;;

// usuariosTypes.js

export const GET_USERS = &quot;get_users&quot;;
export const LOADING = &quot;loading&quot;;
export const ERROR = &quot;error&quot;;

// usuariosActions.js

import axios from &quot;axios&quot;;
import { GET_USERS, LOADING, ERROR } from &quot;../types/usuariosTypes&quot;;

/* Una funcion que retorna otra función*/
export const getUsers = () =&gt; async dispatch =&gt; {
  dispatch({
    type: LOADING
  });
  try {
    const respuesta = await axios.get(
      &quot;https://jsonplaceholder.typicode.com/users&quot;
    );
    //console.log(respuesta.data);

    dispatch({
      type: GET_USERS,
      payload: respuesta.data
    });
  } catch (err) {
    console.error(&quot;Error: &quot;, err.message);
    dispatch({
      type: ERROR,
      payload: err.message
    });
  }
};

// publicacionesActions.js

import axios from &quot;axios&quot;;

import { GET_PUBLICATIONS, LOADING, ERROR } from &quot;../types/publicacionesTypes&quot;;

export const getPublications = () =&gt; async dispatch =&gt; {
  dispatch({
    type: LOADING
  });
  try {
    const respuesta = await axios.get(
      &quot;https://jsonplaceholder.typicode.com/posts&quot;
    );

    dispatch({
      type: GET_PUBLICATIONS,
      payload: respuesta.data
    });
  } catch (err) {
    console.error(&quot;Error: &quot;, err.message);
    dispatch({
      type: ERROR,
      payload: err.message
    });
  }
};

// usuariosReducer.js

import { GET_USERS, LOADING, ERROR } from &quot;../types/usuariosTypes&quot;;

const INITIAL_STATE = {
  usuarios: [],
  loading: false,
  error: &quot;&quot;
};

export default (state = INITIAL_STATE, action) =&gt; {
  switch (action.type) {
    case GET_USERS:
      return { ...state, usuarios: action.payload, loading: false };
    case LOADING:
      return { ...state, loading: true };

    case ERROR:
      return { ...state, error: action.payload, loading: false };

    default:
      return state;
  }
};

// publicacionesReducer.js

import { GET_USERS, LOADING, ERROR } from &quot;../types/usuariosTypes&quot;;

const INITIAL_STATE = {
  usuarios: [],
  loading: false,
  error: &quot;&quot;
};

export default (state = INITIAL_STATE, action) =&gt; {
  switch (action.type) {
    case GET_USERS:
      return { ...state, usuarios: action.payload, loading: false };
    case LOADING:
      return { ...state, loading: true };

    case ERROR:
      return { ...state, error: action.payload, loading: false };

    default:
      return state;
  }
};

// Usuarios/index.js

import React, { Component } from &quot;react&quot;;
import { connect } from &quot;react-redux&quot;;
import { getUsers } from &quot;../../actions/usuariosActions&quot;;
import Spinner from &quot;../general/Spinner&quot;;
import Fatal from &quot;../general/Fatal&quot;;
import Tabla from &quot;./Tabla&quot;;

class Usuarios extends Component {
  componentDidMount() {
    this.props.getUsers();
  }
  ponerContenido = () =&gt; {
    if (this.props.loading) {
      return &lt;Spinner /&gt;;
    }
    if (this.props.error) {
      return &lt;Fatal mensaje={this.props.error} /&gt;;
    }
    return &lt;Tabla /&gt;;
  };

  render() {
    return (
      &lt;div&gt;
        &lt;h1&gt;Usuarios&lt;/h1&gt;
        {this.ponerContenido()}
      &lt;/div&gt;
    );
  }
}

const mapStateToProps = reducers =&gt; {
  return reducers.usuariosReducer;
};

const mapDispatchToProps = {
  getUsers
};

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

// Publicaciones/index.js

import React, { Component } from &quot;react&quot;;
import { connect } from &quot;react-redux&quot;;

import { getUsers } from &quot;../../actions/usuariosActions&quot;;
import { getPublications } from &quot;../../actions/publicacionesActions&quot;;

// const { traerTodos: usuariosTraerTodos } = usuariosActions;
// const { traerTodos: publicacionesTraerTodos } = publicacionesActions;

class Publicaciones extends Component {
  componentDidMount() {
    if (!this.props.usuariosReducer.usuarios.length) {
      this.props.getUsers();
    }
  }

  render() {
    console.log(this.props);
    return (
      &lt;div&gt;
        &lt;h1&gt;Publicaciones de ...&lt;/h1&gt;
        {this.props.match.params.key}
      &lt;/div&gt;
    );
  }
}

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

const mapDispatchToProps = {
  getUsers,
  getPublications
};

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

Nery Alberto Cano Ortigoza

student•

ademas de que es confuso me parece incluso hasta una mala practica, ya que luego te sera muy complicado buscar rápidamente las referencias a esa función

Sandra Mishale Niño Arbelaez

student•

Si, concuerdo contigo. Yo lo hice bastante similar al tuyo.

Elvis Aaron Retiz

student•

Leí algunos comentarios sobre lo confuso que puede llegar a ser trabajar asi pero creo olvidamos que muchas veces estamos trabajando en un equipo de desarrollo y quiza no tenemos el control total para escribir el codigo de forma que pudieramos evitar desde "raiz" este tipo de problemas. Esta es una solucion practica cuando nos encontramos en esta situacion. Muy buena clase.

Abraham Sanchez

student•

Por lo general debería definirse que estándar van a mantener en el código al inicio del proyecto, eso incluye la nomenclatura. Para este caso no soy tan fan del caso aplicado por Rodolfo, prefiero tener definidas las acciones bien especificas, es más intuitivo y te ahorras el problema de duplicidad. Sin embargo, fue interesante saber como actúa redux en estos casos.

Diego Fernando Rojas Quintero

student•

clase #30: creo que me estoy perdiendo en el código.

silvana murgo

student•

idem!

Jorge Alexander Salcedo Alvarez

student•

pues muy interesante la des-estructuración de los metodos, pero seria mejor llamarlos a cada uno segun su función y de los datos que trae. una opinion.

Jose Ortiz

student•

concuerdo contigo.

Ricardo Medina

student•

Tambien estoy de acuerdo contigo, ademas eso evitaria replicar ese destructuring en otras paginas o compenentes que requieran ambas actions.

Nery Alberto Cano Ortigoza

student•

no es una mala practica el cambiarle de nombre a las funciones para usarlo en una pequeña parte del código?, luego te sera casi imposible ubicarla cuando tengas un código mucho mas extenso, es mejor directamente cambiarle el nombre a la función.

Diego Andres Cardenas Caro

student•

Me parecio algo confuso tener los mismos nombres en los reucer. Es mejor desde el inicio definir types, actions y reducers unicos para evitar de raiz esos errores.


//publicacionesReducer.js
 case TRAER_PUBLICACIONES:
            return {
                ...state,
                publicaciones: action.payload,
                cargando: false,
            }

//usuariosReducer.js
 case TRAER_USUARIOS:
            return {...state, 
                usuarios: action.payload,
                cargando: false,                    
            }

José Iván Sandoya

student•

Muy de acuerdo. Nos hubiéramos evitado una clase entera para desambiguar nombres de variables.

Usuario anónimo

user•

También lo hice de esta forma videos antes de éste como para mantener un orden, me parece que: "traerTodos" no es el nombre ideal pero pues si la intención de la clase es mostrar precisamente esta alternativa de re-nombrado me parece perfectamente válido,

Rafael Enrique Gonzalez

student•

Aunque entiendo a la mayoria de los que dicen que la clase fue una perdida de tiempo, pienso que para las personas que no tienen mucha experiencia en el lenguaje, pueden ver como solucionar problemas que quiza ellos mismos causen, sea cual sea la solución, lo importante es saber el como solucionarlos y que brinda javascript para hacerlo, como al desestructurar y renombrar, estoy seguro que si no fuese colocado el nombre del caso "traer_todos" tanto en un reducer como en el otro, muchos no fuesen aprendido que Redux trabaja de esta forma y qué responderian ambos reducers, para mi si vale la pena que mucha gente vea esta clase.

Juan Camilo Lentino Villalba

student•

completamente de acuerdo contigo, lo que mas me llevo de esta clase es la manera que Redux tiene para trabajar en una situación como esta, nunca pensé que ambos Reducers responderían de esa manera y eso es muy importante tenerlo claro.

Jaime Joaquín Gonzalez Bosch

student•

Estoy perdido desde hace 3 clases :(

jean pierre gabriel nieto acosta

student•

todos estos errores los puedes evitar creando tus propios nombres para las funciones, de hecho es una buena práctica al aprender, según me han comentado ayuda a crear tus propias soluciones a los problemas del programar, además si surgen errores es divertido arreglarlos 🤷‍♂️

Willy David Da Conceicao Lozada

student•

Cambiamos el nombre de los actions creators y nos llegan estos actions creators por props. Ya podemos llamar a los actions creator | this.props.usuariosTraerTodos() y los entregamos en el mapDispatchToProps
Y cambiamos el nombre de los types en los reducers y actions creators. Por que cuando ocurra un dispatch este le consulta a todos los reducers, quien tiene ese caso y en los dos reducers se llamaban iguales.
Hasta ahora no hemos usado el actions creator de publicaciones (es decir no llamamos este actions desde el componente publicaciones)

Omar Leal

student•

Hola a todos! Alguién puede saber por qué el action para traerme los post con axion no se ejecuta? Incluso le puse un console.log dentro y no me aparece ni en consola

Luis Lira

student•

Te lanza algún error? Tal vez hay un tipo en el código :) podrías compartir tu código?

Elio De Jesus Lopez Santiago

student•

Vaya manera de complicarse la vida -.- xD

Santiago Lopera Naranjo

student•

En el curso de React Hooks, en un post, explicaron que con useSelector y useDIspatch, puedes traer el estado, y disparar actions! Obviamente usandolos en comoponentes funciones, aquí como quedaría:

import React, { useEffect } from 'react'
import {useDispatch, useSelector } from 'react-redux';
import { useParams } from 'react-router-dom';
import { trearTodos } from '../../actions/publicacionesActions';

const Publicaciones = () => {
    const { key } = useParams();
    const dispatch = useDispatch()
    const {usuarios} = useSelector(state => state.user)
    useEffect(() => {
        dispatch(trearTodos());
       
    }, [dispatch]);
    return (
        <div>
            {key}
        </div>
    )
}

export default Publicaciones

Juan Ventrone

student•

Siento que para solucionar se repite codigo y tambien data, para ser sinceros no me gustó este metodo

Gabriel Gomez

student•

Documentación de la destructuración en JS destructuracion DMZ

Manuel Rivera

student•

Creó que es importante que nos muestre alternativas de como se debería de resolver posibles problemas a presentar en el proyecto, pero en mi caso pienso que es mucho más fácil crear los propios nombre para cada Reducer y dispatch, get_Publications o get_Users

Frank Antonio Piñin Ato

student•

Hay varias posibles soluciones como lo mencionan unos companeros en los aportes y creo que deberian de mostrarse en los cursos.

Juan Felipe Salamanca Gonzalez

student•

Aunque la opinión de muchos es que esta clase fue una perdida de tiempo, yo no lo veo asi por que recuerden que estamos viendo redux desde cero y que ademas es importante saber que hacer en todos los casos aunque ya con nuestros conocimientos podamos intuir una respuesta mejor o mas efectiva, aunque también seria interesante ver

Carlos Eduardo Santaella Guevara

student•

no entendi del porque le pasa funciones al mapStateToProps si antes le había pasado una operador de propagación con un objeto, es decir si se va pasar una acción se podría hacer lo mismo entre los parentesis de connect?

import axios from &quot;axios&quot;;
import { GET_USERS, LOADING, ERROR } from &quot;../types/usuariosTypes&quot;;

/* Una funcion que retorna otra función*/
export const getUsers = () =&gt; async dispatch =&gt; {
  dispatch({
    type: LOADING
  });
  try {
    const respuesta = await axios.get(
      &quot;https://jsonplaceholder.typicode.com/users&quot;
    );
    //console.log(respuesta.data);

    dispatch({
      type: GET_USERS,
      payload: respuesta.data
    });
  } catch (err) {
    console.error(&quot;Error: &quot;, err.message);
    dispatch({
      type: ERROR,
      payload: err.message
    });
  }
};

import axios from &quot;axios&quot;;

import { GET_PUBLICATIONS, LOADING, ERROR } from &quot;../types/publicacionesTypes&quot;;

export const getPublications = () =&gt; async dispatch =&gt; {
  dispatch({
    type: LOADING
  });
  try {
    const respuesta = await axios.get(
      &quot;https://jsonplaceholder.typicode.com/posts&quot;
    );

    dispatch({
      type: GET_PUBLICATIONS,
      payload: respuesta.data
    });
  } catch (err) {
    console.error(&quot;Error: &quot;, err.message);
    dispatch({
      type: ERROR,
      payload: err.message
    });
  }
};

import { GET_USERS, LOADING, ERROR } from &quot;../types/usuariosTypes&quot;;

const INITIAL_STATE = {
  usuarios: [],
  loading: false,
  error: &quot;&quot;
};

export default (state = INITIAL_STATE, action) =&gt; {
  switch (action.type) {
    case GET_USERS:
      return { ...state, usuarios: action.payload, loading: false };
    case LOADING:
      return { ...state, loading: true };

    case ERROR:
      return { ...state, error: action.payload, loading: false };

    default:
      return state;
  }
};

import { GET_USERS, LOADING, ERROR } from &quot;../types/usuariosTypes&quot;;

const INITIAL_STATE = {
  usuarios: [],
  loading: false,
  error: &quot;&quot;
};

export default (state = INITIAL_STATE, action) =&gt; {
  switch (action.type) {
    case GET_USERS:
      return { ...state, usuarios: action.payload, loading: false };
    case LOADING:
      return { ...state, loading: true };

    case ERROR:
      return { ...state, error: action.payload, loading: false };

    default:
      return state;
  }
};

import React, { Component } from &quot;react&quot;;
import { connect } from &quot;react-redux&quot;;
import { getUsers } from &quot;../../actions/usuariosActions&quot;;
import Spinner from &quot;../general/Spinner&quot;;
import Fatal from &quot;../general/Fatal&quot;;
import Tabla from &quot;./Tabla&quot;;

class Usuarios extends Component {
  componentDidMount() {
    this.props.getUsers();
  }
  ponerContenido = () =&gt; {
    if (this.props.loading) {
      return &lt;Spinner /&gt;;
    }
    if (this.props.error) {
      return &lt;Fatal mensaje={this.props.error} /&gt;;
    }
    return &lt;Tabla /&gt;;
  };

  render() {
    return (
      &lt;div&gt;
        &lt;h1&gt;Usuarios&lt;/h1&gt;
        {this.ponerContenido()}
      &lt;/div&gt;
    );
  }
}

const mapStateToProps = reducers =&gt; {
  return reducers.usuariosReducer;
};

const mapDispatchToProps = {
  getUsers
};

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

import React, { Component } from &quot;react&quot;;
import { connect } from &quot;react-redux&quot;;

import { getUsers } from &quot;../../actions/usuariosActions&quot;;
import { getPublications } from &quot;../../actions/publicacionesActions&quot;;

// const { traerTodos: usuariosTraerTodos } = usuariosActions;
// const { traerTodos: publicacionesTraerTodos } = publicacionesActions;

class Publicaciones extends Component {
  componentDidMount() {
    if (!this.props.usuariosReducer.usuarios.length) {
      this.props.getUsers();
    }
  }

  render() {
    console.log(this.props);
    return (
      &lt;div&gt;
        &lt;h1&gt;Publicaciones de ...&lt;/h1&gt;
        {this.props.match.params.key}
      &lt;/div&gt;
    );
  }
}

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

const mapDispatchToProps = {
  getUsers,
  getPublications
};

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

//publicacionesReducer.js
 case TRAER_PUBLICACIONES:
            return {
                ...state,
                publicaciones: action.payload,
                cargando: false,
            }

//usuariosReducer.js
 case TRAER_USUARIOS:
            return {...state, 
                usuarios: action.payload,
                cargando: false,                    
            }

import React, { useEffect } from 'react'
import {useDispatch, useSelector } from 'react-redux';
import { useParams } from 'react-router-dom';
import { trearTodos } from '../../actions/publicacionesActions';

const Publicaciones = () => {
    const { key } = useParams();
    const dispatch = useDispatch()
    const {usuarios} = useSelector(state => state.user)
    useEffect(() => {
        dispatch(trearTodos());
       
    }, [dispatch]);
    return (
        <div>
            {key}
        </div>
    )
}

export default Publicaciones

Llamando a múltiples reducers en una acción

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