# Dissociation de la logique métier des composants d’interface utilisateur

Copilot Chat peut vous aider à séparer votre logique métier de votre code d’interface utilisateur, ce qui facilite la maintenance et la mise à l’échelle de votre application.

Dans de nombreux frameworks front-end, la logique métier peut être incorporée dans les composants de l’interface utilisateur, ce qui rend le code difficile à maintenir ou à étendre, en particulier à mesure que l’application se développe.

Copilot Chat peut vous aider à refactoriser votre code pour extraire la logique métier dans des services distincts ou des solutions de gestion d’état. Cela permet de réutiliser la logique métier entre différents composants de l’interface utilisateur. Cela facilite également l’évolutivité du code en séparant les responsabilités et en réduisant les interdépendances. Cela simplifie aussi les tests unitaires en permettant de tester la logique métier indépendamment des composants de l’interface utilisateur.

## Exemple de scénario

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

```javascript id=counter-component
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;
```

## Exemple d’invite

```copilot copy prompt ref=counter-component
Use Redux to separate the UI code from the Counter component in this code.
```

## Exemple de réponse

Copilot fournit des instructions pas à pas pour refactoriser 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 le 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.

> \[!NOTE]
> Copilot Chat les réponses ne sont pas déterministes. Vous pouvez donc obtenir une réponse différente de celle décrite ici.

### actions.js

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

### reducer.js

```javascript
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

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

const store = createStore(counterReducer);

export default store;
```

### counter.js

```javascript
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

```javascript
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')
);
```

## Lectures complémentaires

* [Ingénierie rapide pour GitHub Copilot Chat](/fr/copilot/concepts/prompting/prompt-engineering)
* [Meilleures pratiques pour l’utilisation de GitHub Copilot](/fr/copilot/get-started/best-practices)