Découpler la logique métier des composants de l'interface utilisateur

Dans de nombreux frameworks frontaux, la logique métier peut être intégrée dans les composants de l'interface utilisateur, ce qui rend le code difficile à maintenir ou à étendre, en particulier au fur et à mesure que l'application se développe.

Copilot Chat peut vous aider à remanier votre code pour extraire la logique métier dans des services distincts ou des solutions de gestion des états. Cela permet de réutiliser la logique métier entre différents composants de l’interface utilisateur. Elle facilite également l'extensibilité du code en séparant les préoccupations et en réduisant les interdépendances, et elle simplifie les tests unitaires en permettant de tester la logique commerciale indépendamment des composants de l'interface utilisateur.

Exemple de scénario

Dans ce code JavaScript, le composant Counter configure la logique commerciale du composant et définit également le code d'interface utilisateur pour l'utilisation du composant dans une page web.

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    if (count >= 10) {
      alert('Count cannot exceed 10');
      return;
    }
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;

Exemples d’invite

Use Redux to separate the UI code from the Counter component in this code.

Exemple de réponse

Copilot fournit des instructions étape par étape pour remanier le code.

Les changements suggérés refactorisent le composant Counter pour utiliser Redux pour la gestion de l'état. Cela inclut la configuration d’un magasin Redux avec un état initial et un réducteur, la définition d’une action d’incrémentation et la modification du composant Counter pour se connecter au magasin Redux. Enfin, l’application est encapsulée avec un composant Provider pour rendre le magasin Redux disponible pour le composant Counter . Cela permet de séparer la logique de l'interface utilisateur de la gestion de l'état.

Les modifications proposées séparent le code en cinq fichiers distincts.

actions.js

export const increment = () => ({
  type: 'INCREMENT'
});

reducer.js

const initialState = {
  count: 0
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      if (state.count >= 10) {
        alert('Count cannot exceed 10');
        return state;
      }
      return {
        ...state,
        count: state.count + 1
      };
    default:
      return state;
  }
};

export default counterReducer;

store.js

import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;

counter.js

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment } from './actions';

const Counter = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increment())}>Increment</button>
    </div>
  );
};

export default Counter;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './counter';

ReactDOM.render(
  <Provider store={store}>
    <Counter />
  </Provider>,
  document.getElementById('root')
);

Pour aller plus loin

• « Ingénierie d’invite pour GitHub Copilot »
• « Meilleures pratiques pour l’utilisation de GitHub Copilot »