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

A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Curso de Redux por Bedu

Curso de Redux por Bedu

Rodolfo Saldivar

Rodolfo Saldivar

Redux Thunk

17/57
Recursos

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.

Aportes 48

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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/

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.

Buen post para entender mejor Redux ^^
https://dev.to/hemanth/explain-redux-like-im-five

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);

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/

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 馃槀

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.

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

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
  });
};

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

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

驴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 鈥榤odificar鈥 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.

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?

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

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

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 鈥榞etUsuarios鈥 function makes the dependencies of useEffect Hook (at line 15) change on every render. Move it inside the useEffect callback. Alternatively, wrap the 鈥榞etUsuarios鈥 definition into its own useCallback() Hook react-hooks/exhaustive-deps

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

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谩.

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.

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

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 馃槂

En la documentaci贸n oficial de Redux se realiza de otra forma, en mi humilde opini贸n creo que se deber铆an seguir las practicas que se exponen en la documentaci贸n oficial, ya que no utiliza Redux Thunk, porque define desde un principio las acciones como plain objects y la parte de los reductores tambi茅n tienen una peque帽a diferencia. Las funciones que retornan las acciones son los actions creators. A mi particularmente no me gusto el curso hasta el momento, repito, hasta el momento, deber铆a ver como sigue.

que pasa si utlizo los hooks de redux ? , creo que con eso se reduce su complejidad y es mas facil de manejar redux

import axios from 'axios'

export const traerTodos = () => async (dispatch) => {
    const respuesta = await axios.get('https://jsonplaceholder.typicode.com/users');
    
    dispatch({
        type: 'traer_usuarios',
        payload: respuesta.data
    })
}```

ACA SE EXPLICA TODA LA CONECCION DE DATA

C贸mo puedo manejar los estados de una petici贸n cuando se usa Redux ? Lo intente hacer de la siguiente manera y me funciona, pero no se que tan bien se vea el c贸digo o c贸mo se deber铆a hacer? , gracias.

Recomendacion, si esta ejecutando este proyecto con babel e webpack, recuerden instalar el plugin babel-plugin-transform-runtime

** https://babeljs.io/docs/en/babel-plugin-transform-runtime**

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": ["@babel/plugin-transform-runtime"]
}```


El tema est谩 explicado bien, el problema es que hay un error t茅cnico de configuraci贸n con el middleware que utiliza redux para usar las acciones, y que estamos directamente haciendo un cambio sustancial en la capa de datos y el sistema de dise帽o que usamos previo, es un pel铆n complejo pero si lo repasas un par de veces y estas atento al c贸digo de los ultimos 4 videos no tiene p茅rdida. Por otra parte hay que ser consciente de que hasta ahora no se han mencionado los hooks y ser铆a muy importante revisar este enlace Hooks - React Redux , en el cual se habla de las altenativas actuales al metodo connect que vemos en las lecciones previas de las fases de redux.

Middleware:

Es la forma de integrar dos diferentes sistemas o m谩s para que trabajen juntos. El middleware proporciona servicios que utilizan las aplicaciones, que se componen de las funciones proporcionadas de otros servicios, con la finalidad de juntar los sistemas dispares.
鈹鈹鈹鈹鈹鈹鈹鈹鈹鈹鈹鈹

Thunk:

Un Thunk (procesador) es una subrutina que se usa para inyectar un c谩lculo (funci贸n) en otra subrutina. Los Thunks se utilizan principalmente para retrasar un c谩lculo / una evaluaci贸n / una operaci贸n hasta que se necesite su resultado.
Tambi茅n, se usa para insertar operaciones al principio o al final de la otra subrutina.
鈹鈹鈹鈹鈹鈹鈹鈹鈹鈹鈹鈹

Redux-thunk:

Es un middleware que permite invocar operaciones que se deben ejecutar en un Thunk 鈹 Concretamente, invocar Action-creators que devuelven una funci贸n en vez de un objeto, c贸mo lo especifica redux al no devolver sino acciones (objetos planos).

Redux Thunk se usa con mayor frecuencia para comunicarse de manera as铆ncrona con una API externa y as铆 traer o guardar datos.
Redux Thunk facilita el env铆o de acciones que siguen el ciclo de vida de una solicitud a una API externa.

馃槂

驴Qu茅 es el equivalente a un componentDidMount() en componente funcional?

Para los que les sale un warning con respecto al arrow function del usuariosReducer por un tema del export default. No se aconseja hacer un export default directamente a una funcion anonima. Preferible nombrar la funcion y en la parte final del codigo hacer el export default de la funcion. O si se tratara de la exportar varias funciones cada funcion nombrada con el export. Aqui les dejo el c贸digo de esta clase:

const INITIAL_STATE = {
  usuarios: [],
};

const reducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case "traer_usuarios":
      return { ...state, usuarios: action.payload };
    default:
      return state;
  }
};

export default reducer;

npm install redux-thunk

sigue siendo una dependencia de tu proyecto, se deber铆a instalar como tal

No me queda muy claro porque las acciones no se importan por default

Desafortunadamente a mi me sale un error al hacer el request axios.get.
Error de acceso al XMLHttprequest, mi localhost ha sido bloqueado.

Me parece algo confuso el tema pero bueno, tambi茅n me parece bueno que salgan tantos errores para entender como solucionarlos. Ya que si todo funcionara directamente entender铆amos como funciona pero no como solucionar o debugear.

Gracias al comentario de @PurpleDoll, si se preguntan que es un thunk aqu铆 una breve explicaci贸n:

Un Thunk es otro nombre m谩s elegante para una funci贸n, pero tiene la peculiaridad de que est谩 encerrada en otra funci贸n de esta manera:

function funcionContenedora() {
  // a la funci贸n que est谩 dentro se le llama "thunk" por que trabaja despu茅s
  return function thunk() {   // puede ser nombrada o no
    console.log('hacer algo');
  };
}

B谩sicamente si quieres ver el 鈥榟acer algo鈥 tienes que llamar primero a funcionContenedora() y eso es todo.

Ac谩 la referencia 馃憠 https://daveceddia.com/what-is-a-thunk/

Excelente, 茅nfasis en escribir bien es algo muy importante

Excelente, algo que aclarar aqu铆 en los conceptos seg煤n encontr茅 una respuesta en stackoverflow, una duda que me surgi贸, la diferencia entre currying y thunk cual es?

Excelente curso!

驴Cual es la diferencia entre cpmposeEnhancers y applyMiddleware?

驴Por qu茅 cuando importamos un paquete no tenemos que colocar la ruta exacta sino solo el nombre del mismo?

Continuamos

Hola Devs:
-Aqui les muestro mi propio avance:

Mis Actions:

Mis Reducers:

Mi archivo principal Users:

Recuerda, #NuncaParesDeAprender 馃挌

Creo que el uso de Currying (o como lo nombra el profesor, las dos funciones) no es estrictamente necesario en este caso, pues termina haciendo parte de la l贸gica de implementaci贸n de cada uno.

Que curso taan bueno!! ya hab铆a usado redux antes y al principio puede ser dificil de entender pero despues de sufrir un rato, cursos como estos te despejan conceptos y usos. 馃憣

let userList = await axios({
        url: "https://jsonplaceholder.typicode.com/users",
        method: "GET",
});