As lentes são uma maneira poderosa e elegante de focar e manipular partes de estruturas de dados imutáveis ​​​​na programação funcional. Eles fornecem um mecanismo para obter e definir valores em objetos ou matrizes aninhados sem alterar os dados originais.

O que são lentes?

Uma lente é uma abstração de primeira classe que fornece uma maneira de acessar e atualizar as partes de uma estrutura de dados. Uma lente normalmente é definida por duas funções: um getter e um setter.

• Getter: Uma função que extrai um valor de uma estrutura de dados.
• Setter: Uma função que atualiza um valor dentro de uma estrutura de dados e retorna uma nova cópia da estrutura.

As lentes são particularmente úteis para trabalhar com estruturas de dados imutáveis, pois permitem que alterações sejam feitas sem alterar os dados originais.

Benefícios das lentes

1. Imutabilidade: As lentes facilitam o trabalho com estruturas de dados imutáveis, garantindo que os dados originais não sejam modificados.
2. Modularidade: as lentes permitem modularizar o acesso e as atualizações de dados, tornando seu código mais reutilizável e mais fácil de manter.
3. Combinabilidade: As lentes podem ser compostas para focar em partes aninhadas de uma estrutura de dados, permitindo que manipulações complexas de dados sejam divididas em operações mais simples e combináveis.

Implementando Lentes em JavaScript

Vamos começar com uma implementação básica de lentes em JavaScript.

Implementação básica de lentes

Uma lente pode ser implementada como um objeto com métodos get e 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 }

Neste exemplo, prop cria uma lente que foca em uma propriedade específica de um objeto. O método get recupera o valor da propriedade e o método set atualiza o valor e retorna um novo objeto.

Compondo lentes

As lentes podem ser compostas para funcionar com estruturas de dados aninhadas. Aqui, criaremos um utilitário para compor 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' } }

Neste exemplo, composeLenses nos permite criar uma lente que foca na propriedade city dentro do objeto de endereço. Isso permite acesso e atualizações de propriedades aninhadas de maneira modular e reutilizável.

Aplicações práticas de lentes

As lentes são particularmente úteis em cenários onde a imutabilidade e a manipulação modular de dados são importantes, como no gerenciamento de estado para aplicativos front-end.

Gerenciando Estado em React

Em um aplicativo React, as lentes podem ser usadas para gerenciar atualizações de estado de uma maneira mais funcional e previsível.

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;

Neste exemplo, usamos lentes para modularizar o acesso e a atualização da propriedade city aninhada dentro do estado do componente React. Essa abordagem torna as atualizações de estado mais previsíveis e mais fáceis de gerenciar.