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

Inmutabilidad

33/57
Recursos

Aportes 23

Preguntas 6

Ordenar por:

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

Me parece delicado consultar por key dado que si hay alg煤n cambio en la base de datos, todo va a fallar, es mejor realizar todo por id:

const { users } = getState().usersReducer

// find index by userId
const userIndex = users.findIndex(u => u.id === parseInt(id))
const user = { ...users[userIndex] }

const userUpdated = {
  ...user,
  posts: postsByUser
}

// clone users
const usersUpdated = users.slice(0)
usersUpdated[userIndex] = userUpdated

dispatch({
  type: SET_USERS,
  payload: usersUpdated
})

Otra forma de implementar esto,seria que en lugar de crear un array de posts en el reducer,sea un objeto.
La idea es que se vayan guardando como un objeto las listas de posts referenciados con el id del usuario,de esa forma seria mas facil ubicar todos los posts de un usuario

Ejemplo :

REDUCER PUBLICATIONS
inicialmente seria un objeto vacio y conforma se vaya haciendo peticiones al servidor se iran guardando,usando por supuesto imutabilidad para conservar los anteriores.

posts = {
// id | posts(data del server)
123 : [{},{},{}],
456 : [{},{},{}],
789 : [{},{},{}],

}

COMPONENTE
Aca usariamos el id en lugar del indice que se le asigna al usuario cuando se hace render de estos, para buscar sus posts.

publicationesReducer.posts[id].map(post => // codigo )

Hmm !! No me gusta manejarlo por key, as铆 que cambi茅 todo el flujo por id del usuario 馃槂

Creo que en esta clase se pudo haber escrito menos c贸digo y un poco mas eficiente para hacer todo lo que se hace.

  1. Creo una constante que guarda la casilla donde est谩n las publicaciones del ultimo usuario.

  2. Creo un nuevo arreglo que tiene todos los usuarios que hay en el reducer de usuariosReducer y al usuario en especifico que se visita actualmente le creo un atributo con la posici贸n del index de donde esta su publicaci贸n.

  3. Hago un dispatch para mandar los usuarios actualizados que es un arreglo con todos los usuarios solo que con un atributo llamado publicaciones_key que nos dice en que casilla del arreglo est谩n las publicaciones del usuario.

Ya que estoy manejando las consultas por id y no por el index o key como lo llama Rodolfo, tuve la necesidad de traer el index de ese usuario y mi c贸digo qued贸 as铆.

import Axios from "axios";
import { GET_PUBLICATIONS_BYUSER } from "../types/PublicationsTypes";
import { GET_USERS } from "../types/UsersTypes";

export const Add_AllsPublicationsByUser = id => async (dispatch, getState) => {
  const response = await Axios.get(
    `https://jsonplaceholder.typicode.com/posts?userId=${id}`
  );

  const { Publications } = getState().PublicationsReducer;
  const UpdatePublications = [...Publications, response.data];
  dispatch({
    type: GET_PUBLICATIONS_BYUSER,
    payload: UpdatePublications
  });

  const { Data } = getState().UsersReducer;

  const UserIndex = Data.findIndex(user => user.id === parseInt(id));

  const PublicationsIndex = UpdatePublications.length - 1;
  const UpdateUsers = [...Data];
  UpdateUsers[UserIndex] = {
    ...Data[UserIndex],
    PublicationsIndex: PublicationsIndex
  };
  dispatch({ type: GET_USERS, payload: UpdateUsers });
};```

Que clase tan confusa 馃ケ馃樀馃ゴ

Les comparto mi concepto de Inmutabilidad despu茅s de horas de estudio馃槑馃挭.

la inmutabilidad es crear un nuevo objeto del estado cada vez que se actualize.

la inmutabilidad se aplica cada vez que utilizamos el Reducer para actualizar el estado, la cual ,crea un nuevo OBJETO DEL ESTADO (estadoGlobalUnicaFuenteDeLaVerdad) por cada actualizacion.

驴Por que? 驴que razones hay para esto?

  • Permite tener un historial del estadoGlobal (Redux dev tools).

  • Facil de debuggear.

  • Se utilizan funciones puras (estas funciones no interactuan con ninguna otra funcion, el DOM o ningun objeto para su ejecucion). Solamente utiliza los parametros que le son asignados; por lo tanto, NO DEPENDEN DE SCOPES, NI DE VARIABLES, NI FUNCIONES, NI MODIFICAN OTRO OBJETO , por eso son mas eficientes y rapidas. 驴Que son los pure functions?

Funciones Mutables : modifican objeto o array

  • las funciones de Array _ push _ (para a帽adir), unshift y splice (para eliminar) no pueden ser utilizadas.Porque estas funciones** MODIFICAN** el Objeto.
    inmutabilidad en Arrays (English)

Funciones Inmutables: crean un objeto o array con base en otro.

  • las funciones de Array y objetos como concat (a帽adir), slice (eliminar), object.assign (a帽adir), _ map_ (recorrer array) y el mas importante ( 鈥tate )SPREAD OPERATOR. son perfectas porque CREAN UN NUEVO OBJETO.
    Inmutabilidad en Objetos (English)

A modo personal creo que es mas eficiente utilizar la inmutabilidad para manejar el estado porque creo que es mas escalable. Pero al final es una filosofia o un paradigma, esto significa que se puede manejar el estado tambien con mutabilidad. Tu puedes cambiar un objeto y asi manejar el estado (mutabilidad)

//mutabilitad
let state = {
carrito:{
  item1: true,
 },
}
state.carrito.item1: false

o tambien puedes ir remplazandolo por cada actualizacion (Inmutabilidad)

//Inmutabilitad
const state = {
carrito:{
  item1: true,
 },
}
const nuevoEstado = { 
...state: { 
carrito: {...carrito, item1}
}

Muy clara la clase en verdad.

La clase es interesante para entender como podemos crear objetos complejos e interactuar con ellos con las ultimas especificaciones del lenguaje, pero conceptualmente siento que es innecesario hacer todo eso.

Si quieren optimizarlo les recomiendo utilizar Map de javascript para indexar los posts en relaci贸n al id de los usuarios.

Pueden ver un ejemplo de c贸mo lo implement茅 aqu铆:
https://github.com/AndrsDev/react-redux-hooks

De lo peor que he visto en platzi

Esto es raro por que la API y su base de datos no esta para nada relacionada, generalmente hay un populate() en mongo o un join() en sql para relacionar los post con los users. Pero bueno, usando jsonplaceholder creo que esta bien

Usamos la inmutabilidad para no alterar o modificar directamente la informaci贸n que manejamos. Esto es 煤til ya que alterar la informaci贸n nos impide, en un futuro, luego de haber interactuado con el aplicativo, hacer uso (consultar, traer, leer鈥) de los datos. Si el flujo (como viaja la informaci贸n) no se pierde o modifica en su proceso de leer y obtener datos, siempre siempre podremos entregar una mejor experiencia

Muy buena clase, entendendiendo ES6 te pude seguir sino me perdia, que bueno que se fomente su uso de esta manera

buena clase

Excelente

Quizas no es la mejor manera de tratar la informacion. Mas sin embargo el analisis del problema me gusta.

Excelente clase. 馃檪

Excelente clase!

Muy buena clase

Interesante

La verdad es que cursos como este me hace sentir que tir茅 mi dinero a la basura.

No me gusta tirar odio ni nada pero es algo que me carcome.