Redux Thunk

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/

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

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 ‘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

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 ‘hacer 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",
});