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

Introducción: las fases de Redux

12/57
Recursos

Los cuatro pilares de Redux son:

  • Store: Almacenamiento
  • Reducers: Estados
  • Action Creators: Funciones
  • Componente: Código JSX

Aportes 27

Preguntas 0

Ordenar por:

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

Redux es una librería escrita en JavaScript, basada en la arquitectura Flux y creada por Dan Abramov, se basa en 3 principios fundamentales:

  • Solamente hay una fuente de la verdad.
  • El estado es de solo lectura.
  • Solamente podemos utilizar funciones puras.

![](


La manera en que trabaja es un ciclo donde:

Component =>

se comunica con el

Action =>

se va al al reducer y la da informacion que necesita

Reducers

Regresa al componente con el nuevo estado
El componente con el virtual DOM sabe que cambiar y se repite el proceso

Durante todo este proceso esta en almacenamiento el estado global, sobre el cual se fluye

4Pilares de Redux
Store -> Almacenamiento -> va a hacer el principal porque ahí se va a almacenar todo lo que necesitamos.
Reducers -> Estado -> dependiendo del componente la información que vamos a tener.
Action Creators -> Funciones -> Son todas las funciones que se llaman para pedir información que generalmente son promesas.
Componente -> Código JSX -> Son las partes de React.

Store: Almacenamiento
Reducers: Estados
Action Creators: Funciones
Componente: Código JSX

Creo que sería bueno ser más específico en los conceptos. Por ejemplo, los **reducers **son funciones puras que describen cómo el estado va a cambiar a partir de una acción, entonces reciben la acción y el estado anterior y devuelven un nuevo estado. Por otro lado, las acciones son un objeto que describen qué fue lo que pasó y de esta forma poder modificar el estado, ahora las action creators no son más que funciones que devuelven una acción. Por último, el store, además de almacenar el estado, permite que se acceda al estado, que se pueda modificar por medio de acciones o que hayan subscribers.

En otras palabras:

  • El Componente al requerir hacer una modificación al estado, ejecuta una acción (action),

  • El Action haré los procedimientos necesarios (como interacciones con API), y enviará el resultado de ese procedimiento al reducer (usualmente uno específico). En algunos casos, el action solo lo usaremos para señalar a qué reducer irá la información, sin hacer ningun procedimiento en medio (ya que nuestro componente no se comunica con los reducers).

  • El Reducer añadirá, eliminará o modificará el estado de la aplicación con la información recibida y la devolverá al componente

Pilares de Redux:

  1. Almacenamiento
  2. Reducers / Estados
  3. Action Creators / Funciones
  4. Componentes / Código en JSX

¿Cómo funciona?

El Componente se comunica con el Action Creator para que este a su vez le pase toda la información necesaria del estado del componente al Reducer. De esta forma el Reducer le devuelve el nuevo estado al Componente. Y este junto al Virtual DOM actualizan el nuevo estado a presentar en la interfaz.

Todo esto es posible porque Redux tiene un almacenamiento global para que la consulta sobre los estados. Vaya desde un punto centralizado a todos nuestros componentes.

Principios de Redux

Los pilares de redux son:

Store
(almacenamiento) (Estado global)

Reducers
(Estado)

Actions Creators
(Funciones)

Es quien pide información (promesas)

Componentes
(Código JSX)

😎👏😉Este profe se la sabe para unir las ideas y llevar a algo en concreto.🤯😱🤖

Componente —» Actions —» Reducer —» Componente

Creo que con éste curso comienzo a digerir más Redux. Qué genial!

Introducción: las fases de Redux

4 pilares:

  1. Store -> Almacenamiento (Toda la información, todos los estados)
  2. Reducers -> Estados (Dependendiendo del componente)
  3. Actions Creators -> Funciones (Pedimos información, normalmente son promesas)
  4. Componente -> Código JSX (React)

El componente se comunica con el action creator y este se va al reducer y le da información que necesita. Cuando es actualizado, regresa al componente con el nuevo estado. El corazón de Redux es el almacenamiento.

Gif que explica Redux.

Que buena clase, no tan claro pero comienzo a entender solo con palabras 🤞

Respuesta a:
Introducción: las fases de Redux
4Pilares de Redux
Store: Almacenamiento ,es el principal porque ahí se va a almacenar todo lo que necesitamos, o sea los estados de todos los componentes.
Reducers:Estado,dependiendo del componente la información que vamos a tener, por ejemplo: El reducer de usuario seria el componente que tiene estado de Usuario y se lo entrega al store .
Action:Creators-Funciones:Son todas las funciones que se llaman para pedir información que generalmente son promesas.
Componente -Código JSX: Son las partes de React.

Los cuatro pilares de Redux son:

Store: Almacenamiento
Reducers: Estados
Action Creators: Funciones
Componente: Código JSX

Los cuatro pilares de Redux son:

Store: Almacenamiento
Reducers: Estados
Action Creators: Funciones
Componente: Código JSX

GG vamos a ver si con este curso termino de entender Redux de una ves por todas , falta un corso de redux con angular

Excelente clase. Entonces sería Reactdux? jaja 🙂

Intro Redux
Los **4 pilares **de Redux:

  • Store: El almacenamiento es el principal de todo redux ya que se encarga de almacenar los estados
  • Reduces: Es la información que depende del componente vamos a obtener
  • Actions Creators: Son todas las funciones que vamos a ejecutar para pedir información que generalmente son promesas.
  • Componentes: Son las partes de react que vemos en la vista JSX

Reducers
Las acciones describen que algo pasó, pero no especifican cómo cambió el estado de la aplicación en respuesta. Esto es trabajo de los reducers.

Actions
Las acciones son un bloque de información que envia datos desde tu aplicación a tu store. Son la única fuente de información para el store. Las envias al store usando store.dispatch().


¿Es mi impresión o se explicó al revés?

fuentes: https://es.redux.js.org/docs/basico/acciones.html
https://es.redux.js.org/docs/basico/reducers.html

Store: Almacenamiento
Reducers: Estados
Action Creators: Funciones
Componente: Código JSX

Es interesante la forma en que se gestiona y se identifica los conceptos de Redux. Al final, al ser librería, debe de ser lo más atómico para ser utilizado en diferentes contextos.

Fases de Redux
Store: Almacenamiento, Aquí se almacena toda la información que necesitamos.
Reducers: Estados, dependiendo del componente, son la información que vamos a tener.
Action Creators: Funciones, Son todas las funciones que tenemos que ejecutar para poder pedir la información que normalmente son promesas.
Components: código JSX, es lo que vemos en pantalla o en la interfaz.