Las lentes son una forma potente y elegante de centrarse y manipular partes de estructuras de datos inmutables en la programación funcional. Proporcionan un mecanismo para obtener y establecer valores dentro de objetos o matrices anidados sin alterar los datos originales.

¿Qué son las lentes?

Una lente es una abstracción de primera clase que proporciona una forma de acceder y actualizar las partes de una estructura de datos. Una lente normalmente se define mediante dos funciones: un captador y un definidor.

• Getter: Una función que extrae un valor de una estructura de datos.
• Setter: Una función que actualiza un valor dentro de una estructura de datos y devuelve una nueva copia de la estructura.

Las lentes son particularmente útiles para trabajar con estructuras de datos inmutables, ya que permiten realizar cambios sin mutar los datos originales.

Beneficios de las lentes

1. Inmutabilidad: Las lentes facilitan el trabajo con estructuras de datos inmutables, asegurando que los datos originales no se modifiquen.
2. Modularidad: Las lentes le permiten modularizar el acceso a los datos y las actualizaciones, lo que hace que su código sea más reutilizable y más fácil de mantener.
3. Componibilidad: Las lentes se pueden componer para centrarse en partes anidadas de una estructura de datos, lo que permite dividir manipulaciones de datos complejas en operaciones más simples y componibles.

Implementación de lentes en JavaScript

Comencemos con una implementación básica de lentes en JavaScript.

Implementación básica de lentes

Una lente se puede implementar como un objeto con los métodos get y set.

const lens = (getter, setter) => ({
  get: (obj) => getter(obj),
  set: (val, obj) => setter(val, obj),
});

const prop = (key) => lens(
  (obj) => obj[key],
  (val, obj) => ({ ...obj, [key]: val })
);

// Usage
const user = { name: 'Alice', age: 30 };

const nameLens = prop('name');

const userName = nameLens.get(user);
console.log(userName); // 'Alice'

const updatedUser = nameLens.set('Bob', user);
console.log(updatedUser); // { name: 'Bob', age: 30 }

En este ejemplo, el accesorio crea una lente que se enfoca en una propiedad específica de un objeto. El método get recupera el valor de la propiedad y el método set actualiza el valor y devuelve un nuevo objeto.

Lentes de composición

Las lentes se pueden componer para funcionar con estructuras de datos anidadas. Aquí crearemos una utilidad para componer lentes.

const composeLenses = (outerLens, innerLens) => ({
  get: (obj) => innerLens.get(outerLens.get(obj)),
  set: (val, obj) => outerLens.set(innerLens.set(val, outerLens.get(obj)), obj),
});

// Usage with nested data
const addressLens = prop('address');
const cityLens = prop('city');

const userAddressCityLens = composeLenses(addressLens, cityLens);

const user = {
  name: 'Alice',
  address: {
    city: 'Wonderland',
    zip: '12345',
  },
};

const userCity = userAddressCityLens.get(user);
console.log(userCity); // 'Wonderland'

const updatedUser = userAddressCityLens.set('Oz', user);
console.log(updatedUser); // { name: 'Alice', address: { city: 'Oz', zip: '12345' } }

En este ejemplo, composeLenses nos permite crear una lente que se enfoca en la propiedad de la ciudad dentro del objeto de dirección. Esto permite el acceso a propiedades anidadas y actualizaciones de forma modular y reutilizable.

Aplicaciones prácticas de lentes

Las lentes son particularmente útiles en escenarios donde la inmutabilidad y la manipulación de datos modulares son importantes, como en la gestión de estado para aplicaciones front-end.

Gestión del estado en React

En una aplicación React, las lentes se pueden usar para administrar las actualizaciones de estado de una manera más funcional y predecible.

import React, { useState } from 'react';

const App = () => {
  const [state, setState] = useState({
    user: {
      name: 'Alice',
      address: {
        city: 'Wonderland',
      },
    },
  });

  const userLens = prop('user');
  const addressLens = prop('address');
  const cityLens = prop('city');

  const userAddressCityLens = composeLenses(userLens, composeLenses(addressLens, cityLens));

  const updateCity = (newCity) => {
    const newState = userAddressCityLens.set(newCity, state);
    setState(newState);
  };

  return (
    

      
City: {userAddressCityLens.get(state)}
       updateCity('Oz')}>Move to Oz
    
  );
};

export default App;

En este ejemplo, utilizamos lentes para modularizar el acceso y la actualización de la propiedad de la ciudad anidada dentro del estado del componente React. Este enfoque hace que las actualizaciones de estado sean más predecibles y más fáciles de administrar.