Action Creators

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

Nahuel Castro

student•

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

Rodolfo Saldivar

teacher•

No te preocupes Nahuel, en 2 videos más (explicación teórica), se verá toda la explicación del ciclo completo. Por ahora solo estamos configurando todo lo necesario paso por paso.

Jonatan Ariste

student•

No lo se Rick...

Nikolas Santis

student•

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.

Willy David Da Conceicao Lozada

student•

![](

William Rodriguez

student•

Y como manejas entonces los estados globales con react avanzado? datos como el jwt o etc. suponiendo una app pequeña con 200 componentes. Haces levantamiento de estado para todos los componentes hijos?

Y ademas apollo es una libreria para GraphQL que nada tiene que ver con lo que hace react-redux .

Mariano Alberto Martinez

student•

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!

Johan García Trejo

student•

la explicación no fue muy clara

Valentina Fernández Rada

student•

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

Jonathan Forero

student•

Nice!

Sandra Mishale Niño Arbelaez

student•

Gracias! Buen aporte

Jayro Jesus Ku Salazar

student•

Por si tienen dudas sobre el uso de los payload y dispatch como yo lo tuve. ¿payload en redux?

¿dispatch en redux?

Elizabeth Isadora Ramírez Ortíz

student•

esta parte se me hizo la mas difícil

Cesar Merlo

student•

como duele redux jaja

Luis David Arias Manjarrez

student•

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

Oscar Miguel Fabian Bernal

student•

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

Rodolfo Saldivar

teacher•

Si, es correcto. Como los "actions" que necesitamos están en 1 archivo, usamos éste directo. Mas adelante en el curso combinaremos acciones y usaremos mapDispatchToProps, ya que entendamos más sobre el flujo de Redux.

Steven Gomez

student•

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

Johan Mosquera

student•

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

Johel Alonzo Gamarra Canahuire

student•

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

Manuel Alejandro Aguilar Téllez Girón

student•

Hola compañero. Cuéntanos en qué parte tienes dudas para poder ayudarte, recuerda que Platzi no son sólo cursos, también somos la comunidad, si no entiendes podemos ayudarte. :D

Daniel Zamora

student•

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

Luis Felipe Medina Rodriguez

student•

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

Roberto Del Valle

student•

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?

Juan Castro

teacher•

Necesitamos un dispatch para enviar nuestro nuevo estado al store.
Ya que recibimos el dispatch en un parámetro, necesitamos envolver esa función en otra función que nos permita enviar diferentes argumentos (el payload`) desde la vista en React.

Carlos Olivares

student•

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

Juan Pablo Celiz

student•

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

Kevin Martello Mayorga Cleveland

student•

muchas vueltas no creen ??

Jaime Ramos

student•

Kevin Martello Mayorga Cleveland

student•

Gianpierre Fernandez

student•

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.

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

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

Action Creators

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