En React, muchas operaciones necesitan
ser inmutable por lo que las operaciones
donde no manipulamos la estructura de datos subyacente.
Y por lo tanto, es muy importante
saber cómo agregar elementos a una carrera,
cómo eliminar elementos y también actualizar elementos
todo sin mutar la matriz subyacente original.
Ahora estas técnicas que vamos a aprender aquí.
son absolutamente esenciales para el desarrollo de React
pero la buena noticia es que siempre funcionan de la misma forma.
Y si entiendes aquí cómo funciona,
Entonces estarás bien preparado para el resto del curso.
Como mencioné, lo que queremos hacer aquí es aprender cómo
cómo agregar elementos, cómo eliminar elementos,
y cómo actualizar elementos de una matriz
sin cambiar el original.
Y así una vez más vamos a trabajar.
con nuestra variedad de libros.
Entonces una serie de objetos,
que realmente es lo más común,
Entonces, la estructura de datos más común a la que vamos.
encontrar cuando trabajamos con datos en el front-end.
Entonces digamos primero agregar un objeto de libro a la matriz.
Comencemos creando este nuevo objeto libro aquí.
Entonces este será el número seis aquí.
El titulado debe ser
Harry Potter y la cámara de los secretos".
Secretos, bueno, todavía está mal.
Y luego la autora es JK Rowling.
Entonces ya tienes un libro de Harry Potter en la colección.
Y ahora aquí agregamos otro.
Y de hecho, ya aprendimos cómo creamos una nueva matriz.
basado en una matriz original
y luego agregando algún otro elemento.
Entonces, hablamos de eso desde el principio.
de la sección cuando hablamos del operador de diferencial.
¿recuerda eso?
Entonces digamos libros y luego de agregar, digamos
o después de agregar.
Y entonces todo lo que tenemos que hacer es difundir todos los libros aquí.
en esta matriz recién creada,
y luego simplemente agregue otro libro, es decir, otro objeto.
Y luego echamos un vistazo a esto aquí mismo.
Verás que ahora tenemos seis de ellos.
y el último es este que acabamos de crear.
Y nuevamente, podríamos agregar esto también al principio.
Así que aquí, pero lo más común es simplemente agregar un libro nuevo.
hasta el final de la matriz.
Entonces este fue bastante fácil.
Ahora eliminemos un libro.
Entonces elimine un objeto de libro de la matriz.
Nuevamente, esto siempre funcionará exactamente de la misma manera.
no importa cómo se vean los objetos.
Bueno, siempre y cuando tengan DNI, que suelen tener.
Ahora vamos a crear una nueva matriz nuevamente.
Así que siempre hay nuevas matrices.
Siempre necesitamos no mutar nada.
pero crea nuevas matrices.
Ahora, en la práctica, estas operaciones se abstraerían.
en algunas funciones.
Entonces, por ejemplo, crearíamos una función llamada agregar libro
y eliminar libro y actualizar libro en lugar de crear
Todas estas matrices son así.
Pero, por supuesto, esto es sólo para ilustrar la idea.
y la técnica, ¿vale?
Entonces los libros después de eliminarlos serán una nueva matriz
después de eliminar uno de los objetos del libro.
Básicamente, ahora crearemos una nueva matriz basada en libros.
después de agregar, que acabamos de crear.
Y ahora vamos a utilizar uno de nuestros métodos de matriz.
Así que pensemos juntos en esto.
Entonces, queremos eliminar un libro.
Y así, después de eliminar, la matriz será más corta.
que antes y entonces cuál de los métodos de matriz
¿Hace una matriz más corta que antes?
Bueno, eso es correcto.
Es la matriz de filtros, ¿verdad?
Entonces, cuando filtramos algo,
entonces la nueva matriz será más corta.
Así que filtremos y una vez más, cada elemento aquí es un libro.
Y entonces, en este caso, digamos que queremos eliminar el libro.
con el DNI número tres.
Y entonces podemos decir que book.id es diferente de tres.
Y eso es todo.
Echemos un vistazo a eso.
Este tiene el ID dos y el siguiente tiene el número cuatro.
Entonces tres ya no están ahí.
excelente.
Entonces, ¿por qué funcionó esto?
Bueno, por lo que ya aprendimos antes.
Entonces, siempre que esta condición aquí en la devolución de llamada
devuelve un valor falso entonces ese objeto
no estará en la matriz final.
Entonces, si queremos eliminar el libro con el ID tres,
básicamente lo que queremos es incluir en el array final
todos los libros donde el ID es diferente a tres, ¿no?
Porque nuevamente, siempre que esta condición aquí
es realmente cierto, el objeto terminará
en la matriz filtrada final.
Y entonces, la forma más fácil de pensar en esto.
es realmente escribir una condición
lo que coloca los objetos en la nueva matriz.
Y nuevamente, eso sucede siempre que el ID del libro es diferente.
que tres porque cuando son tres, queremos eliminarlo.
Y sí, eso es exactamente lo que pasó aquí.
como vimos aquí en el resultado.
Genial y nuevamente, normalmente crearíamos una función.
llamado eliminar libro y luego esa función recibiría
esta ID aquí y luego aquí simplemente usaríamos
esa identificación así.
Pero aquí simplemente estamos eliminando manualmente el que
con el DNI de tres.
De nuevo, sólo para ilustrar cómo funciona todo.
Y ahora, en la etapa final, actualicemos un objeto de libro,
bueno, en la matriz.
Entonces libros, digamos después de la actualización.
y lo haremos en los libros después de eliminarlo.
Entonces, es como encadenar todo esto aquí, uno tras otro.
Pero estamos almacenando el resultado intermedio dentro de variables.
Y nuevamente, pensemos en qué método de matriz necesitamos aquí.
Entonces, después de actualizar uno de los objetos del libro,
la matriz resultante debe tener exactamente la misma longitud
como antes ¿no?
Y entonces, ¿qué método produce una matriz?
¿Cuál tiene la misma longitud que antes?
Sí, ese es el método del mapa.
Entonces el mapa es nuestra elección cada vez que queremos actualizar un objeto.
eso está dentro de una matriz.
Bien, ahora necesitamos nuestro operador de turno porque nosotros,
Por supuesto, no quiero hacer nada con la mayoría de los libros.
Solo queremos actualizar exactamente un objeto de libro.
que es el que tiene el ID que estamos buscando.
Entonces, imaginemos que queremos actualizar el libro.
con el ID de uno, entonces digamos book.id si es uno,
luego devolver un objeto actualizado, que por ahora,
escribamos un objeto vacío temporalmente.
Pero si no, entonces simplemente devuelve el libro tal como está.
así sin ningún cambio.
Y eso es simplemente un libro, ¿verdad?
Así que veamos ya el resultado aquí.
sólo para ver que algo pasó.
De nuevo, estamos intentando actualizar el libro.
con el DNI de uno.
Y ahora este de aquí es solo un objeto vacío.
porque este era aquel en el que el ID del libro era igual a uno.
Entonces era igual a uno y por lo tanto,
entonces lo que se devolvió de esta función de devolución de llamada
Era este objeto vacío, que es lo que vemos aquí.
Pero para todos los demás,
simplemente devolvió el objeto original.
Entonces nada cambió.
Ahora bien, pero claro que no queremos
para devolver este objeto vacío pero queremos devolver un objeto
que tiene una propiedad actualizada.
Y de hecho, ya aprendimos cómo hacerlo hace mucho tiempo.
nuevamente usando el operador de extensión.
Entonces, recuerde, simplemente extendemos el objeto libro actual
en este objeto.
Entonces este objeto recién creado.
Entonces, tomamos básicamente todas las propiedades.
en este nuevo objeto y luego simplemente podemos sobrescribir
uno de ellos.
Digamos que queremos páginas nuevamente, 1210.
Hagamos algo un poco más dramático sólo para ver
el resultado un poco mejor.
Y sí, ahora solo tenemos una página aquí.
mientras que todo lo demás tampoco se ve afectado.
Pongámoslo 1.210 y ahí vamos.
Entonces actualizamos una propiedad en un objeto de la matriz.
Y esto es nuevamente algo que hacemos todo el tiempo.
Entonces básicamente necesitas memorizar
esta receta aquí mismo.
Entonces, cuando queremos agregar un nuevo objeto a una matriz, hacemos esto.
Creamos una nueva matriz, distribuimos los elementos actuales,
y agregue el nuevo elemento.
Cuando queremos eliminar uno, usamos filtro.
porque el filtro acorta la matriz resultante.
Luego simplemente guardamos todos los elementos del libro.
Entonces, todos los objetos del libro donde la idea es diferente.
que el que queremos eliminar.
Y para actualizar usamos el método del mapa.
porque el método map crea una matriz que tiene
exactamente la misma longitud que el original.
Y entonces cuando estemos en el ID que estamos buscando
para que queramos manipular, entonces creamos un nuevo objeto
y anular la propiedad que queremos manipular.
Y para todos los demás libros,
simplemente devolvemos el libro sin cambios.