Redux Thunk

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

Resumen

Redux Thunk permite a las action creators invertir el control despachando funciones. Van a recibir dispatch como argumento y capaz llamarlo asíncronamente. Estas funciones son llamas thunks.

Comentarios

Karla

student•

Un middleware actúa como un puente entre un sistema operativo o base de datos y aplicaciones. En este caso específico, un thunk es una función que actúa como un wrapper ya que envuelve una expresión para retrasar su evaluación.

Redux-thunk te permite escribir creadores de acciones que retornan una función en vez de un objeto de acción típico. Entonces, el thunk puede ser usado para retrasar el envío de una acción hasta que se cumpla una línea de código asíncrona.

https://platzi.com/blog/como-funciona-redux-thunk/

Carlos Alberto Cruz Jimenez

student•

excelente, gracias

Ivan Andres Diaz Lopez

student•

en palabras simples, el redux thunk sirve para tener funciones asincronicas dentro de los actions.

 ( ) => (dispatch) => {}
//esto es un Callback (asincronismo)

los middlewares es agregar funcionalidades extras a redux. serie de clases donde se trabajan mas a profundidad estos conceptos

Santi Dalmasso

student•

Siento que hace falta mas explicación del porque de las cosas. Hay muchos comentarios a favor del profesor y otros en contra. Pero Rodolfo dicta las clases, dice que debemos escribir pero falta explicar mas detalladamente. En mi opinión, siendo el primer curso que realizo, me pierdo en estas clases, me resulta mas facil ir a la documentación. Es mi opinión, se que muchos opinan lo contrario.

Jesus Adrian Berrio Valdes

student•

Definitivamente prefiero este curso que él de la escuela de JavaScript 😢

Josue Alonso

student•

Literalmente solo va diciendo "vamos poniendo esto aca, aca y aca" y no explica nada terrible

Grace Nikole Avarado

student•

Buen post para entender mejor Redux ^^

Juan Castro

teacher•

Esta lectura también te puede ayudar: https://platzi.com/blog/redux-no-esta-muerto/. :wink:

Daniel Meza

student•

Una explicación "con peras y manzanas". Excelente 🙌

Roberto S. Sampayo

student•

Chicos les dejo el archivo Usuarios pasado a stateless, tuve algunos problemas pasandolo porque pense que se necesitaban de estados y solo son necesarios los props:

import React, { Component, useEffect } from 'react';
import { connect } from 'react-redux';

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

const Usuarios = (props) => {

  const getUsuarios = async () => {
    props.traerTodos();

  }

  useEffect(() => {
    getUsuarios()
  }, [])

  const ponerFilas = () => props.usuarios.map((usuario) => (
    <tr key={usuario.id}>
      <td>
        {usuario.name}
      </td>
      <td>
        {usuario.email}
      </td>
      <td>
        {usuario.website}
      </td>
    </tr>
  ));

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

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

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

Mariana Valencia Gallego

student•

Para los que sepan inglés y quieran más detalles de para qué sirve y qué es Thunk, esta lectura me ayudó mucho: https://daveceddia.com/what-is-a-thunk/

Axlin Miranda

student•

Excelente artículo, lo traducir a español y pude entenderlo y es muy parecido a lo que ha explicado en el curso

René Sanchez

student•

Muy buen aporte 💚

Jasan Azael Hernández Bautista

student•

Si quieren aprender de dónde sale todo y aprender mejor busquen el curso de Redux 2018 que da @LeonidasEsteban súper curso vengo de halla y este curso solo es para tener un proyecto más aunque veo que est profesor avanza muy rápido y para quien es su primera vez dice whatafuckk... Jajaja 😂

Alan Reinaldo Muñoz López

student•

Hola Jasan, creo que este es un comentario súper fuera de lugar. A mi gusto personal Leonidas es excelente profesor, pero sin duda Rodolfo lo hace genial, incluso explica muy detalladamente. Por que digo esto? Simplemente por que creo que necesitamos valorar los esfuerzos de la plataforma, si esta aquí es por algo y debemos confiar en Platzi.

Un saludo!

Christian Motta

student•

Coincido contigo Jasan. Leonidas explica, Rodolfo solo dicta lo que tienes que escribir.

Yorman

student•

solo dire que este es uno de los videos mas tediosos que jamas haya visto, hace que paresca complicado algo tan ridiculamente facil. me da risa ver comentarios que dicen que no an entendido nada. 6 horas viendo video jaja y odio ser troll lo odio pero no pude evitarlo esta ves :v jajaja pos data yo se redux y no tengo idea aaa de porque lo hicero tan complicado.

Brayhan Alejandro Gabriel Guerrero

student•

Error tras error, sinceramente eso es de muy mal gusto!

César Palma

student•

nunca habia visto este planteamiento pedagógico a algun tema

Andrés Felipe Eslava Zuluaga

student•

Test Driven Development. Mira esto y comprende por qué se realiza así.

Jonatan Ariste

student•

Con fetch quedaria así

export const traerTodos = () => async dispatch => {
  const response = await fetch(`https://jsonplaceholder.typicode.com/users`);
  let data = await response.json();

  dispatch({
    type: "traer_usuarios",
    payload: data
  });
};

Raul Palacios

student•

Así también ;)

const url = 'https://jsonplaceholder.typicode.com/users'
const data = await(await fetch(url)).json()

Ivan Santiago

student•

Para que no se pierdan, acá un poco de la documentación oficial de React. 😁 . Básicamente, para decirle al store lo que queremos hacer, debemos decírselo, ésto se hace a través de las actions. Las actions son enviadas a un reducer, el cual modifica el estado haciendo lo que el action le dice. .

// Imagina una aplicación de TODO's
// Una action sólo especifica el tipo, y algo de información extra.
{type: 'AGREGAR_TODO', texto: 'Hacer la tarea.'}
{type: 'BORRAR_TODO', indice: 2}

// Un reducer sólo combina el state y la action enviada.
// Si no existe un estado previo, se inicializará en un array vacío []
function todos(state = [], action) {
	switch (action.type) {
   		case 'AGREGAR_TODO':
		// Si la action se llama "AGREGAR_TODO", hará esto
		return state.concat([{ text: action.texto, completada: false }])
		case 'AGREGAR_TODO':
		// Si la action se llama "BORRAR_TODO", hará esto
		return state.splice(action.indice, 1)
    		default:
      		return state
  }
}

. ¡Profundiza! Core concepts de React

Danilo Valenzuela

student•

Le hace falta una mejor explicación de los temas, la documentación oficial de Redux es muy buena.

Gabriel Gomez

student•

¿Qué es dispach en la función traerTodos() de asuariosActions.js?

En pocas palabras es la función redux.dispach().

Esta función es la que redux nos da para poder ejecutar las acciones, o sea 'modificar' el estado del store.

Al usar un middleWare se nos permite ejecutar funciones dentro de las acciones.

Las acciones no son más que un objeto normal, que contiene el tipo de acción (type) y los datos nuevos del estado (payload), por lo que no pueden ejecutar otras funciones, como llamar a una API por ejemplo.

El middleWare redux-thunk lo que hace es ser intermediario entre la acción y el reducer, de esta manera podemos en una función llamar a la API y actualizar el estado del store.

¿Y de dónde viene el dispatch?

redux-thunk literalmente es un if que pregunta si hay una función en la acción que le estamos pasando al reducer, si es verdadero ejecuta la función y si es falso pasa el objeto (o sea la acción) al reducer.

Es por esa razón que usamos 2 arrow function, la primera es la función normal que crearía el objeto de la acción, pero en lugar de eso retornamos otra arrow function, que llama a la API y ejecuta la función dispatch.

redux-thunk al ejecutar la función le pasa como argumento la función dispatch y getState del store.

Y el dispatch, que es la función encargada de hablar con el reducer, recibe como parámetro un objeto plano que es la acción como tal que llega al reducer.

¿Y por qué esa sintaxis tan rara de dispatch?

dispatch({
		type: 'traer_usuarios',
		payload: respuesta.data
	})

Tiene esa sintaxis porque para que un arrow funcion retorne un objeto el objeto tiene que estar en paréntesis. Ejecuta este código en el navegador para que veas como funciona.

const x = () => {hola:1}
x()
//undefined

const y = () => ({hola:1})
y()
//{hola:1}

Espero les ayude la explicación y si estoy mal en algo por favor hacérmelo saber.

Andrés Felipe Eslava Zuluaga

student•

Gracias crack!

Jorge Ossa

student•

Siempre es necesario usar middleware? en el curso de react router y redux no se esta usando, en alguna actualización se quito este paso?

César Palma

student•

en el curso de react router y redux no se hicieron llamadas asincronas, se manejo data directo desde el estado, no fue un ejemplo aplicable a la vida real.

Jhean Pacheco

student•

Para entender mejor como funciona un Middleware en Redux, les invito a ver el siguiente video: Redux parte 6: Redux Middleware

Carlos Javier Bazan Huaman

student•

que locura tratar de entender todo el ciclo redux cuando algo falla.

Marlon Véliz

student•

Aquí un ejemplo para quienes lo quieran hacer con stateless components.

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

const Users = (props) => {
  // const [usuarios, setUsarios] = useState([]);
  const { getUsers, users } = props;

  const getUsarios = useCallback(() => {
    getUsers();
  }, [getUsers]);

  useEffect(() => {
    getUsers();
  }, [getUsarios, getUsers]);

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

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

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

export default connect(mapStateToProps, usersActions)(Users);

Que resuelve el warning The ‘getUsuarios’ function makes the dependencies of useEffect Hook (at line 15) change on every render. Move it inside the useEffect callback. Alternatively, wrap the ‘getUsuarios’ definition into its own useCallback() Hook react-hooks/exhaustive-deps

Y el enlace donde explican el porqué del warning Understanding the useEffect Hook

Marco Antonio Trujano Rodriguez

student•

Muchas gracias no sabia como resolver esa advertencia, me gusta mantener la consola limpia

JAIME URQUIZU

student•

Pues a mí no me sale lo que él dice... La verdad es que cuesta entender qué está explicando, de dónde viene todo, qué hay que hacer y por qué se hace así... Vamos, que no se entiende ná de ná.

Juan Castro

teacher•

:point_right: ¿Cómo funciona redux-thunk?

Johan García Trejo

student•

Middleware o lógica de intercambio de información entre aplicaciones (interlogical) es un software que asiste a una aplicación para interactuar o comunicarse con otras aplicaciones, o paquetes de programas, redes, hardware o sistemas operativos.

Ivan Andres Diaz Lopez

student•

en palabras simples, el redux thunk sirve para tener funciones asincronicas dentro de los actions.

 ( ) => (dispatch) => {}
//esto es un Callback (asincronismo)

los middlewares es agregar funcionalidades extras a redux. serie de clases donde se trabajan mas a profundidad estos conceptos

Miguel Angel Reyes Moreno

student•

Para recordar: Tenemos componente. Inicia vacío, luego en componentDidMount() { this.props.traerTodos(); } le decimos que vaya a la acción, esta acción la verifica con Reducer y tiene que regresar el payload, que en este caso es la llamada al json de usuarios.

Por ahora voy entendiendo eso :)

import React, { Component, useEffect } from 'react';
import { connect } from 'react-redux';

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

const Usuarios = (props) => {

  const getUsuarios = async () => {
    props.traerTodos();

  }

  useEffect(() => {
    getUsuarios()
  }, [])

  const ponerFilas = () => props.usuarios.map((usuario) => (
    <tr key={usuario.id}>
      <td>
        {usuario.name}
      </td>
      <td>
        {usuario.email}
      </td>
      <td>
        {usuario.website}
      </td>
    </tr>
  ));

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

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

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

export const traerTodos = () => async dispatch => {
  const response = await fetch(`https://jsonplaceholder.typicode.com/users`);
  let data = await response.json();

  dispatch({
    type: "traer_usuarios",
    payload: data
  });
};

// Imagina una aplicación de TODO's
// Una action sólo especifica el tipo, y algo de información extra.
{type: 'AGREGAR_TODO', texto: 'Hacer la tarea.'}
{type: 'BORRAR_TODO', indice: 2}

// Un reducer sólo combina el state y la action enviada.
// Si no existe un estado previo, se inicializará en un array vacío []
function todos(state = [], action) {
	switch (action.type) {
   		case 'AGREGAR_TODO':
		// Si la action se llama "AGREGAR_TODO", hará esto
		return state.concat([{ text: action.texto, completada: false }])
		case 'AGREGAR_TODO':
		// Si la action se llama "BORRAR_TODO", hará esto
		return state.splice(action.indice, 1)
    		default:
      		return state
  }
}

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

const Users = (props) => {
  // const [usuarios, setUsarios] = useState([]);
  const { getUsers, users } = props;

  const getUsarios = useCallback(() => {
    getUsers();
  }, [getUsers]);

  useEffect(() => {
    getUsers();
  }, [getUsarios, getUsers]);

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

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

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

export default connect(mapStateToProps, usersActions)(Users);

Redux Thunk

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