{"meta":{"title":"Dissociation de la logique métier des composants d’interface utilisateur","intro":"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.","product":"GitHub Copilot","breadcrumbs":[{"href":"/fr/copilot","title":"GitHub Copilot"},{"href":"/fr/copilot/tutorials","title":"Tutoriels"},{"href":"/fr/copilot/tutorials/copilot-cookbook","title":"livre de recettes GitHub Copilot"},{"href":"/fr/copilot/tutorials/copilot-cookbook/refactor-code","title":"Refactoriser le code"},{"href":"/fr/copilot/tutorials/copilot-cookbook/refactor-code/decouple-business-logic","title":"Dissocier la logique métier"}],"documentType":"article"},"body":"# Dissociation de la logique métier des composants d’interface utilisateur\n\nCopilot 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.\n\nDans 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.\n\nCopilot 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.\n\n## Exemple de scénario\n\nDans 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.\n\n```javascript id=counter-component\nimport React, { useState } from 'react';\n\nconst Counter = () => {\n  const [count, setCount] = useState(0);\n\n  const increment = () => {\n    if (count >= 10) {\n      alert('Count cannot exceed 10');\n      return;\n    }\n    setCount(count + 1);\n  };\n\n  return (\n    <div>\n      <p>Count: {count}</p>\n      <button onClick={increment}>Increment</button>\n    </div>\n  );\n};\n\nexport default Counter;\n```\n\n## Exemple d’invite\n\n```copilot copy prompt ref=counter-component\nUse Redux to separate the UI code from the Counter component in this code.\n```\n\n## Exemple de réponse\n\nCopilot fournit des instructions pas à pas pour refactoriser le code.\n\nLes 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.\n\nLes modifications proposées séparent le code en cinq fichiers distincts.\n\n> \\[!NOTE]\n> Copilot Chat les réponses ne sont pas déterministes. Vous pouvez donc obtenir une réponse différente de celle décrite ici.\n\n### actions.js\n\n```javascript\nexport const increment = () => ({\n  type: 'INCREMENT'\n});\n```\n\n### reducer.js\n\n```javascript\nconst initialState = {\n  count: 0\n};\n\nconst counterReducer = (state = initialState, action) => {\n  switch (action.type) {\n    case 'INCREMENT':\n      if (state.count >= 10) {\n        alert('Count cannot exceed 10');\n        return state;\n      }\n      return {\n        ...state,\n        count: state.count + 1\n      };\n    default:\n      return state;\n  }\n};\n\nexport default counterReducer;\n```\n\n### store.js\n\n```javascript\nimport { createStore } from 'redux';\nimport counterReducer from './reducer';\n\nconst store = createStore(counterReducer);\n\nexport default store;\n```\n\n### counter.js\n\n```javascript\nimport React from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { increment } from './actions';\n\nconst Counter = () => {\n  const count = useSelector(state => state.count);\n  const dispatch = useDispatch();\n\n  return (\n    <div>\n      <p>Count: {count}</p>\n      <button onClick={() => dispatch(increment())}>Increment</button>\n    </div>\n  );\n};\n\nexport default Counter;\n```\n\n### index.js\n\n```javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Provider } from 'react-redux';\nimport store from './store';\nimport Counter from './counter';\n\nReactDOM.render(\n  <Provider store={store}>\n    <Counter />\n  </Provider>,\n  document.getElementById('root')\n);\n```\n\n## Lectures complémentaires\n\n* [Ingénierie rapide pour GitHub Copilot Chat](/fr/copilot/concepts/prompting/prompt-engineering)\n* [Meilleures pratiques pour l’utilisation de GitHub Copilot](/fr/copilot/get-started/best-practices)"}