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

Action Creators

16/57
Recursos

Aportes 37

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

¿Soy el único que no entiende absolutamente nada del razonamiento detrás del código?.

Soy sincero. Vengo a aprender sólo porque hay empresas que siguen con redux, pero creo que hay muchas cosas que con redux ya se pueden hacer en react y hay otras dependencias como apollo también que pueden hacer las cosas más simples.
Ya sé! ya sé! llegará Juan David Castro diciendo que Redux no está muerto, pero realmente, si llevamos React a nivel muy avanzando, como lo hace el curso de Midudev (React Avanzando) no hay necesidad de usar Redux.

hey tú! si llegaste hasta aquí y piensas abandonar el curso, no lo hagas! personalmente yo abandoné react hace como 4 años porque justo no lograba entender muchos conceptos relacionados con el manejo del estado, me parecía algo tan complejo y no le encontraba sentido para llevarlo a la práctica, posteriormente tuve la fortuna de trabajar con Angular y en un proyecto hace casi 3 años me vi en la necesidad de implementar Redux en Angular con una librería llamada ngrx, no voy a negar que también me costó trabajo entenderlo, pero al final logré implementar profesional y satisfactoriamente el manejo del estado en una aplicación bancaria real que requería un flujo de datos inmenso, ahora que estoy aquí complementando mi formación y conocimiento en react, me ha resultado mucho más sencillo comprender Redux y puedo decir que vale muchísimo la pena esforzarnos por entenderlo, y una vez que lo entiendes y lo llevas a la práctica te facilitará muchas cosas, el desarrollo, flujo de información y comunicación entre componentes serán más sencillos, pero sobre todo, le encontrarás los beneficios y ventajas de implementarlo en tus aplicaciones.
Mi recomendación es que no te quedes solo con el conocimiento adquirido en Platzi, date el tiempo y la dedicación de leer documentación oficial de las herramientas, busca y lee diferentes blogs, opiniones de la comunidad, y sobre todo practica lo aprendido.
Tiene mucha razón el eslogan de Platzi, ¡nunca pares de aprender!

la explicación no fue muy clara

Tal vez aquí se expliquen ciertos conceptos mejor: https://dev.to/ibrahima92/7-steps-to-understand-react-redux-121j

Por si tienen dudas sobre el uso de los payload y dispatch como yo lo tuve.
¿payload en redux?
https://stackoverflow.com/questions/51357412/what-is-a-payload-in-redux-context


¿dispatch en redux?
https://es.redux.js.org/docs/api/Store.html#dispatch

esta parte se me hizo la mas difícil

como duele redux jaja

Creo que se debió haber empezado por una lógica mas pequeña y explicable como en la documentación de react-redux, antes de preparar el código para hablar los thunks, conozco la necesidad pero no se puede abarcar todo de una, veo muchos enredados con eso.

Así serían los actions sin los action creators directamente en el mapDispatchToProps, son funciones que se cargan en los props para que cuando se llamen, se comuniquen con los reducers.

const mapDispatchToProps = dispatch => {
  return {
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' }),
    reset: () => dispatch({ type: 'RESET' })
  }
}

Hola Rodolfo un consulta, por qué no se utilizo mapDispatchToProps? en la docuemntacion de redux recomiendan esta manera de hacerlo

Tema complicado de entender, pero, la explicación es muy sencilla y concisa 😃

Mantengo aún la esperanza de poder entender esto a lo último 😄

Muy malo el método de enseñanza. 👎

No te preocupes, lo vamos a arreglar en la próxima clase… está parece ser la tónica de este curso…

“cada video debería ser una solución y no un problema por solucionar…”

algo asi creo que seria con Hooks

import React,{useState, useEffect} from 'react'
import axios from 'axios'
import { connect } from 'react-redux'
import '../index.css'
import * as usuariosActions from '../actions/usuariosActions'
const API = "https://jsonplaceholder.typicode.com/users"


const Opp = (props) =>{
  const [usuarios , setUsuarios] = useState([]);
    
    useEffect(() => {
       axios.get(API)
      .then(response => {
        setUsuarios(response.data)
        console.log(props);
        props.traerTodos();

      })
      .catch(e => {
          // Capturamos los errores
          console.log(e)
      })
    }, [])
  return (
    
    <div className="margen">
    <table className="tabla">
      <thead>
        <tr >
          <th>Nombre</th>
          <th>Correo</th>
          <th>Enlace</th>
          <th>Número</th>
        </tr>
      </thead>
    <tbody>
      {usuarios.map((item) =>(
         <tr key={item.id}>
            <td>{item.name}</td>
            <td>{item.email}</td>
            <td>{item.website}</td>

         </tr> 
      ))}
    </tbody>
    </table>

  </div>
  )
}
const mapStateToProps = (state) =>{
  return state.usuariosReducer;

}

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

![output](

Es un poco confuso de la manera que esta haciendo el actions.

export const traerTodos = payload => ({
  type: 'traer_usuarios',
  payload,
});

No seria un poco mas facil de leer escribirlo de esta manera?

Les comparto este enlace que explica que son los middleware
https://azure.microsoft.com/es-mx/overview/what-is-middleware/

esto se hace así y no preguntes por qué muchacho… 😒

muchas vueltas no creen ??

Solo es un metodo diferente, tenemos que tener en cuenta que este curso de React por Bedu tener tener fuerte ya las bases de Redux es importante,.
Normalmente, un action creator debe retornar un objeto o una accion, { type: ‘traer usuarios’}, pero aqui lo que el profesor hace es retornar una funcion, para seguramente en clases posteriores hacer una accion asyncrona. como un fetch. entonces esta preparando el terreno para luego introducirnos a los Middleware y a redux-thunk. que hace posible el return de funciones.

Creamos una carpeta de acciones y un archivo llamado usuariosActions.js que este va a hacer una función que retorna otra función que recibe un parámetro llamado dispatch (envio) es el que va a disparar esa llamada y va a contactar al reducer para que haga el cambio de estado, ya en nuestro componente de usuarios/index.js importamos las acciones y en el connect le asignamos estas acciones, Y nos llega por parametro la function traertodo asi que estamos conectando las acciones a nuestro componente, pero si llamamos a esa función da error porque los los actions tienen que ser objetos planos.

Hola! Porqué se utilizan dos arrow functions ?

Aprendan el hook useReducer() antes de aprender Redux…

https://es.reactjs.org/docs/hooks-reference.html#usereducer

function init(initialCount) {
  return {count: initialCount};
}

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    case 'reset':
      return init(action.payload);
    default:
      throw new Error();
  }
}

function Counter({initialCount}) {
  const [state, dispatch] = useReducer(reducer, initialCount, init);
  return (
    <>
      Count: {state.count}
      <button
        onClick={() => dispatch({type: 'reset', payload: initialCount})}>
        Reset
      </button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

Bueno parece que nos lleva cuesta abajo aprendiendo de los golpes, también es una forma de aprender pero mas dolorosa, XD

No sé ustedes pero yo le entiendo más a él que al niño de 19 que explica todo muy raro… aunque muy buenos los dos

Los 3 conceptos de Redux:
El estado es de sólo lectura:

No podemos modificar el estado directamente, sólo podemos leer de él para representarlo en la vista y si queremos modificarlo, lo tenemos que hacer a través de acciones.
·

Una acción es un objeto JavaScript que incluye al menos un atributo type que indica el tipo de acción que estamos emitiendo y, en caso que existan, datos asociados al cambio o modificación.

Estas acciones suelen devolverse a través de un Action Creator que sería de este tipo:

function loadProducts(products) {
  return {
    type: "LOAD_PRODUCTS",
    products,
  };
}

Tipo de acciones:

Indica que tipo de acción o evento que se va ejecutar.
·

Acciones:

Una acción es un simple objeto JavaScript.
Dentro de ese objeto, importa los tipos de acciones, que indica una intención de realizar algo ─ y que lleva datos asociados de ser necesario.
─>
Las acciones son la única forma de obtener datos en el Store, por lo que cualquier dato, ya sea de los eventos de la interfaz de usuario, callbacks de la red u otras fuentes, como WebSockets, debe enviarse / despacharse eventualmente como acciones.
·

Action Creators:

El ‘creador de acciones’ es un método de ayuda proporcionado por la biblioteca. Crea una acción en los parámetros del método, establece el tipo de acción o se lo proporciona al dispatcher.
·

Dispatch:

Las acciones necesitan ser propagadas o disparadas hasta el Store. Entonces las acciones se despachan y la vista es la que se encarga, usualmente pero no siempre, de enviar las acciones al dispatcher.

El despachador es el eje central que gestiona todo el flujo de datos en una aplicación Flux. Esencialmente es un registro de callbacks en el store
El dispatcher es un mecanismo entre las acciones y el store: se encarga de distribuir acciones al store

Si estás usando componentes funcionales, no es necesario hacer todo esto 😄
Puedes utilizar el useSelector de react-redux para ligar tu componente con tu reductor y el useDispatch para ejecutar tus acciones.
Ejemplo:

Los actions creators se encargan de traer la información.

7 steps to understand React Redux.

Creamos una carpeta ‘actions’ y dentro el archivo ‘usuariosActions.js’:

export const traerTodos = () => (dispatch) => { //* Función que retorna otra función
  dispatch({
    type: 'traer_usuarios', //*Tiene que llamarse exactamente igual al case del reducer
    payload: [1,2,3]
  })
}

Hey, sé que puede ser confuso todo esto. No te desanimes, repasa las clases, lee por tu cuenta en otros lados, etc…
Esto toma tiempo, pero creeme que le agarras la onda!
También te recomiendo el curso de React Router Redux te puede ayudar a complementar ciertos conceptos.

Y practica!

Este curso es una serie, al final siempre hay un error que nos engancha a ver enseguida el siguiente video.

Que genial, con suspenso y todo 😄

No queda mas facil asignarle el valor directamente al prop sin tener que usar un action.

Muy clara la explicacon sobre e funcionamiento de los Actions y Reducers. 😉

Estuvo un poco entendible la clase pero me gusto.

es un poco confuso

No muramos en el intento
Para evitar todo este dolor de cabeza y tener que usar dependencias externas, mejor usemos la documentación.

La documentación nos dice que es mejor utilizar una funcion u objeto llamado mapDispatchToProps, el cual contendrá todas las acciones que ocupará el componente y se encargará de despacharlas a las props del mismo.

Podemos utilizar mapDispatchToProps como una función o un objeto, la diferencia radica en el nivel de customización que permite una funcion con respecto al objeto.

Como función

const mapDispatchToProps = (dispatch) => ({
  setUser: (payload) => dispatch(setUser(payload)),
});

Como objeto

const mapDispatchToProps = {
  setUser,
};

usersActions

export const setUser = (payload) => ({
  type: 'SET_USER',
  payload,
});

Conexión con el componente
No olvidemos importar la acción

import { setUser } from '../actions/usersActions';

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

usersReducer

export default (state = [], action) => {
  switch (action.type) {
    case 'SET_USER':
      return state.concat([action.payload]);

    default:
      return state;
  }
};

¿Como llamaremos a la acción?

<button
        type='button'
        onClick={() =>
          setUser({
            name: 'Jhean',
            lastname: 'Pacheco',
          })
        }
      >

Aquí estamos llamando a la acción setUser definida en el mapDispatchToProps y le pasamos un objeto con datos de un usuario (ese objeto será payload).

Cualquier duda pregunten nomás