Introduction à la programmation fonctionnelle en JavaScript : Lenses #9

Les Lenses sont un moyen puissant et élégant de se concentrer et de manipuler des parties de structures de données immuables dans la programmation fonctionnelle. Ils fournissent un mécanisme permettant d'obtenir et de définir des valeurs dans des objets ou des tableaux imbriqués sans muter les données d'origine.

Que sont les lentilles ?

Une lentille est une abstraction de première classe qui fournit un moyen d'accéder et de mettre à jour les parties d'une structure de données. Une lentille est généralement définie par deux fonctions : un getter et un setter.

• Getter : Une fonction qui extrait une valeur d'une structure de données.
• Setter : Une fonction qui met à jour une valeur dans une structure de données et renvoie une nouvelle copie de la structure.

Les lentilles sont particulièrement utiles pour travailler avec des structures de données immuables, car elles permettent d'apporter des modifications sans muter les données d'origine.

Avantages des lentilles

1. Immuabilité : les lentilles facilitent le travail avec des structures de données immuables, garantissant que les données d'origine ne sont pas modifiées.
2. Modularité : les Lenses vous permettent de modulariser l'accès aux données et les mises à jour, rendant votre code plus réutilisable et plus facile à maintenir.
3. Composabilité : les objectifs peuvent être composés pour se concentrer sur des parties imbriquées d'une structure de données, permettant ainsi de décomposer des manipulations de données complexes en opérations plus simples et composables.

Implémentation de lentilles en JavaScript

Commençons par une implémentation de base des lentilles en JavaScript.

Implémentation de base de l'objectif

Une lentille peut être implémentée en tant qu'objet avec les méthodes get et 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 }

Dans cet exemple, prop crée une lentille qui se concentre sur une propriété spécifique d'un objet. La méthode get récupère la valeur de la propriété et la méthode set met à jour la valeur et renvoie un nouvel objet.

Composer des objectifs

Les objectifs peuvent être composés pour fonctionner avec des structures de données imbriquées. Ici, nous allons créer un utilitaire pour composer des lentilles.

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

Dans cet exemple, composeLenses nous permet de créer une lentille qui se concentre sur la propriété de la ville à l'intérieur de l'objet adresse. Cela permet l'accès et les mises à jour des propriétés imbriquées de manière modulaire et réutilisable.

Applications pratiques des lentilles

Les objectifs sont particulièrement utiles dans les scénarios où l'immuabilité et la manipulation modulaire des données sont importantes, comme dans la gestion d'état pour les applications frontales.

Gestion de l'état dans React

Dans une application React, les lentilles peuvent être utilisées pour gérer les mises à jour d'état de manière plus fonctionnelle et prévisible.

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 (
    <div>
      <p>City: {userAddressCityLens.get(state)}</p>
      <button onClick={() => updateCity('Oz')}>Move to Oz</button>
    </div>
  );
};

export default App;

Dans cet exemple, nous utilisons des lentilles pour modulariser l'accès et la mise à jour de la propriété de ville imbriquée dans l'état du composant React. Cette approche rend les mises à jour d'état plus prévisibles et plus faciles à gérer.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!