Inmutabilidad

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 ( …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}
}

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.