Inmutabilidad

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

Juan Camilo Angel Fandiño

student•

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

Emmanuel Rangel Jiménez

student•

Exactamente

Daniel Cutipa

student•

Coincido contigo, los indices son muy riesgosos, porque en una consulta puedes traer ordenado por nombre, o fecha de creacion, en esos casos los datos seran incoherentes, mejor usar ID

Alexis Alberto Texis Auza

student•

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 )

Rodolfo Saldivar

teacher•

Es una excelente idea y manera de hacer las cosas; hasta este punto lo haremos usando arreglos, mas adelante vamos a utilizarlo como sugieres, normalizando los datos.

softdynamic sac

student•

Hmm !! No me gusta manejarlo por key, así que cambié todo el flujo por id del usuario :)

Santiago Marulanda Molina

student•

Estoy de acuerdo, me parece que complicó un poco las cosas :D

Jose Enrique Marquez

student•

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

Gabriel De Andrade

student•

Te animo a que muestres tu propuesta! Es genial siempre ver diferentes soluciones al mismo problema, algo que pasa muy seguido en desarrollo :D

Manuel Alejandro Aguilar Téllez Girón

student•

¡Sí, publica tu propuesta! Eso nos hace mejores developers a todos 🙌

Willy David Da Conceicao Lozada

student•

Creo una constante que guarda la casilla donde están las publicaciones del ultimo usuario.
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.
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.

Ivan Andres Diaz Lopez

student•

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 ( ...state )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}
}

Ivan Andres Diaz Lopez

student•

la inmutabilidad => cada que se crea un nuevo estado, se renderiza el componente. ahora hace sentido la logica de crear un nuevo estado.

Andrés Felipe Eslava Zuluaga

student•

Excelente aporte!

Manuel Rivera

student•

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

Teresita Cuccia

student•

Me sale este error y no puedo solucionarlo. Probé varias cosas incluso comenzar de cero el proyecto. Alguien me ayuda? ![](

Teresita Cuccia

student•

Pude arreglarlo! Comparto solución por si a alguno más le pasa : En la pantalla de cmd correr:

npm install -g npm@latest para actualizar npm porque a veces tiene errores.
npm install para volver a instalar las dependencies del proyecto.
npm run start

Solucionado

Erik Elyager

student•

Genial que hayas podido arreglarlo por tu cuenta! gracias por compartir 💚

Kevin Parra Lopez

student•

Que clase tan confusa 🥱😵🥴

Melissa González Nebrijo

student•

Muy clara la clase en verdad.

YEISON ALEXANDER ARISTIZABAL AGUDELO

student•

useEffect(() => { const load = async () => { if(!userReducer.users?.length){ await fetchAllUsers(); } await getPostByUser(userIndex); } load(); }, []);

Ok I have this problem, when fetchAllUsers is called and then getPostByUser , the second call never has access to const { users = [] } = getState().userReducer; it always returns null, how I can solve this? by adding a dependency on the use effect?

Andres Leonardo Arevalo

student•

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.

Andrés Enrique Sanabria Flores

student•

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

Felipe Sepulveda Quijada

student•

De lo peor que he visto en platzi

Elio De Jesus Lopez Santiago

student•

La verdad... que si..., vaya forma de complicarse la vida :V

Matías Gabriel Navarro

student•

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

Alexis Steven Valderrama

student•

Para que se esta haciendo esto?

Jairo Alberto Perez Guerrero

student•

Hola!. ¿Qué beneficio le puedo encontrar a la inmutabilidad?... no sé no le encuentro una razón de ser.

Gracias por responder.

Héctor Hugo Moreira

student•

Tengo problemas de cors cuando se realiza la petición al API, alguna solución para esto.?

!Error

Héctor Hugo Moreira

student•

Luis Carlos Zabala

student•

¿No es mejor trabajar directamente con el id del usuario en vez de usar la posición de éste en el arreglo?

Diego Forero

Team Platzi•

Hola, por la forma en que viene los datos debes usar el key para traer la información especifica del usuario y lo explica el profesor que es por el spread operator aquí https://platzi.com/clases/1613-redux/20668-inmutabilid-6/?time=167

Rodolfo Saldivar

teacher•

No te preocupes, lo hacemos de esta manera en siguientes videos.

Oscar Estuardo de la Mora

student•

Toda esta información de los reducers está en el lado del server o del cliente.??

Rodolfo Saldivar

teacher•

Las obtuvimos del server 1 sola vez; y ya que las tenemos en el Reducer, siempre las estamos usando dentro del cliente. El reducer con la info esta del lado del cliente.

Oscar Estuardo de la Mora

student•

oh entiendo y se guarda en alguna herramienta html5 como localstorage o indexedDB? o solo se mantiene en memoria con la magia de redux?

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

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

Inmutabilidad

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