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

Reducers

14/57
Recursos

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

El Provider es el componente de Redux en el cual encerraremos nuestra aplicaci贸n para que puedan comunicarse los componentes entre ellos.

Aportes 25

Preguntas 3

Ordenar por:

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

Este si es un verdadero curso, una vez tome uno de Leonidas de este tema, quede mas aburrido jajaja

No lo s茅 Rick鈥
Toda la parte de Reducers no se explico nada de momento, ojala mas adelante se explique todo pero por ahora la parte de
export default (state = INITIAL_STATE, action) => whaaaaaaaat

Una de las mejores inversiones que realizado. Exelete servicio profesor 5 estrellas 馃槃

Necesitamos pol铆tica anti-haters en los comentarios.

Cada ves se pone mejor.

A mi me salio el siguiente error :

`Failed to compile
./src/redurcers/index.js
Module not found: Can't resolve 'usuariosReducer.js' in 'C:\Users\Robert02\Desktop\blogplatzi\src\redurcers'
This error occurred during the build time and cannot be dismissed.`

yo lo solucione cambiando la ruta de redurcers en el Index.js principal

Antes:

import redurcers from './redurcers';

Despues:

import redurcers from './redurcers/usuariosReducer';

He usado tanto context que me quede loco al ver que el atributo era store y no value jajahaha

const INITIAL_STATE = {
    users: []
};

// eslint-disable-next-line import/no-anonymous-default-export
export default (state = INITIAL_STATE, action) => {
    switch(action.type) {
        case 'get_users': 
            return { ...state, users: action.payload }
        default: 
            return state
    }
}```

Debi贸 ponerle m谩s zoom la barra de exploraci贸n en el editor, eso no se ve nada

Reducers

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

Excelente clase. 馃檪

ahh con raz贸n (si lo dije)

El Provider es el componente de Redux en el cual encerraremos nuestra aplicaci贸n para que puedan comunicarse los componentes entre ellos.

Posdata: con configStore no es necesario usar combineReducers, si no que se pasan como un objeto directamente a conbineReducers

  1. crear carpeta de reducers y el index.js de esta carpeta, donde se crearan los reducers.
  2. encapsular las rutas con Providers, estas rutas pueden tener acceso al store.
  3. crear estado inicial de usuarios en la carpeta de reducers y archivo de reducer de usuarioReducer .
  4. Crear el reducer de usuarios que recibe como parametros el estado inicial y el action.
  5. importar en el index.js de reducers el de usuarioReducer.

Los 3 conceptos de Redux:
Cambios con funciones puras:

Sucede que en el modelo de Flux nos dice que hay un Hub Central que realiza un despacho de acciones. Las acciones son provocadas por la vista / el usuario / la interfaz, que desencadena un tipo de acci贸n o tipo de evento. Estas acciones son despachadas para que el Store entienda que debe ocurrir un cambio / actualizaci贸n en los datos.

Dentro de Redux, las actualizaciones se hacen por medio de FUNCIONES PURAS que

  1. por medio de la recepci贸n de dos par谩metros: el estado y una acci贸n,
  2. toman el estado actual (o estado anterior, que es la acci贸n en forma de objeto) y los datos que est谩n llegando con la acci贸n,
  3. procesan / operan la informaci贸n que lleg贸, y
  4. devuelven todo en un objeto.

  • Cabe resaltar que no va a tomar datos de otros componentes, ni hacer llamados a APIs.

CombineReducers:

Es un m茅todo que pertenece a la API de Redux y permite organizar los objetos de estado de una mejor forma: este orden permite un mejor acceso a los datos via props y la escritura de c贸digo de haga m谩s legible.

Su funci贸n es que convierte un objeto cuyos valores son diferentes funciones reducer en una 煤nica funci贸n reducer que se puede pasar a createStore.

Hay que ir despacio gente! Solo vayan despacio!

Creamos el primer reducer, llamado 鈥渦suariosReducer.js鈥:

const INITIAL_STATE = {
  usuarios: [],
};

export default (state = INITIAL_STATE, action) => { //* El estado es el initial state que regresa una funci贸n
  switch(action.type) {
    case 'traer_usuarios':
      return { ...state, usuarios: action.payload }

    default: return state;
  }
}

Y esto lo importamos en index.js de la carpeta reducers:

import { combineReducers } from "redux";
import usuariosReducers from "./usuariosReducers";

export default combineReducers({
  usuariosReducers
});

Buen video y por fin solucione mi error ahora si descansare un rato para no aburrirme facilmente.

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

El Provider es el componente de Redux en el cual encerraremos nuestra aplicaci贸n para que puedan comunicarse los componentes entre ellos.

Confuso pero supongo que todo se ira aclarando

Hola Devs:
-Por mi parte lo hice de una manera un poco mas simple a mi parecer, aqui esta mi solucion:

Correcto, ya centralizamos el estado un un 煤nico lugar.
Es clara el paso a paso de lo que estamos observando. Sin embargo, es importante que se vaya explicando la importancia del orden que se est谩 llevando.

Para los que est谩n usando VSCode con la extensi贸n de Material Icon Theme y no les carga los iconos de las carpetas, pueden usar el siguiente comando

>material-icon-theme.toggleIconPacks

Despu茅s seleccionan React + Redux

PD: los comandos se lanzan con ctrl + p (cmd + p).

y en que version de react funsiona este reducer porque a mi me explota

const INITIAL_STATE = {
    users:[]

};

export default (state = INITIAL_STATE) => {
    switch (action.type){
        case 'get_users':
            return{...state, users: action.payload}

            default:{
                return state
            }
    }
}