Линзы — это мощный и элегантный способ сосредоточиться на частях неизменяемых структур данных и манипулировать ими в функциональном программировании. Они предоставляют механизм для получения и установки значений во вложенных объектах или массивах без изменения исходных данных.

Что такое линзы?

Линза — это первоклассная абстракция, обеспечивающая доступ к частям структуры данных и их обновление. Линза обычно определяется двумя функциями: геттером и сеттером.

• Getter: функция, извлекающая значение из структуры данных.
• Setter: функция, которая обновляет значение в структуре данных и возвращает новую копию структуры.

Линзы особенно полезны для работы с неизменяемыми структурами данных, поскольку они позволяют вносить изменения без изменения исходных данных.

Преимущества линз

1. Неизменяемость: линзы облегчают работу с неизменяемыми структурами данных, гарантируя, что исходные данные не будут изменены.
2. Модульность: линзы позволяют модульно организовать доступ к данным и обновлениям, что делает ваш код более пригодным для повторного использования и простым в обслуживании.
3. Компоновываемость: линзы можно скомпоновать так, чтобы они фокусировались на вложенных частях структуры данных, что позволяет разбить сложные манипуляции с данными на более простые составные операции.

Реализация линз в JavaScript

Давайте начнем с базовой реализации линз на JavaScript.

Базовая реализация линзы

Линзу можно реализовать как объект с помощью методов get и 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 }

В этом примере prop создает линзу, фокусирующуюся на определенном свойстве объекта. Метод get извлекает значение свойства, а метод set обновляет значение и возвращает новый объект.

Составление линз

Линзы можно составить для работы с вложенными структурами данных. Здесь мы создадим утилиту для составления линз.

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

В этом примере composeLenses позволяет нам создать линзу, которая фокусируется на свойстве города внутри объекта адреса. Это обеспечивает доступ к вложенным свойствам и их обновление модульным и многоразовым способом.

Практическое применение линз

Линзы особенно полезны в сценариях, где важны неизменяемость и модульное манипулирование данными, например, при управлении состоянием интерфейсных приложений.

Управление состоянием в React

В приложении React линзы можно использовать для более функционального и предсказуемого управления обновлениями состояния.

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;

В этом примере мы используем линзы для модульной организации доступа и обновления вложенного свойства города в состоянии компонента React. Такой подход делает обновления состояния более предсказуемыми и простыми в управлении.