{"meta":{"title":"Entkoppeln der Geschäftslogik von Benutzeroberflächenkomponenten","intro":"Copilot Chat kann Ihnen dabei helfen, Ihre Geschäftslogik von Ihrem Benutzeroberflächencode zu trennen, sodass Sie Ihre Anwendung einfacher verwalten und skalieren können.","product":"GitHub Copilot","breadcrumbs":[{"href":"/de/copilot","title":"GitHub Copilot"},{"href":"/de/copilot/tutorials","title":"Anleitungen"},{"href":"/de/copilot/tutorials/copilot-cookbook","title":"GitHub Copilot Kochbuch"},{"href":"/de/copilot/tutorials/copilot-cookbook/refactor-code","title":"Umgestalten von Code"},{"href":"/de/copilot/tutorials/copilot-cookbook/refactor-code/decouple-business-logic","title":"Entkoppeln der Geschäftslogik"}],"documentType":"article"},"body":"# Entkoppeln der Geschäftslogik von Benutzeroberflächenkomponenten\n\nCopilot Chat kann Ihnen dabei helfen, Ihre Geschäftslogik von Ihrem Benutzeroberflächencode zu trennen, sodass Sie Ihre Anwendung einfacher verwalten und skalieren können.\n\nViele Front-End-Frameworks ermöglichen die Einbettung der Geschäftslogik in Benutzeroberflächenkomponenten, wodurch der Code nur schwer verwaltet oder erweitert werden kann. Das gilt insbesondere für komplexere Anwendungen.\n\nCopilot Chat kann Ihnen helfen, Ihren Code umzugestalten, um Geschäftslogik in separate Dienste oder Zustandsverwaltungslösungen zu extrahieren. Dadurch kann die Geschäftslogik in unterschiedlichen Benutzeroberflächenkomponenten wiederverwendet werden. Zudem kann der Code einfacher skaliert werden, indem Bedenken getrennt und Abhängigkeiten reduziert werden. Darüber hinaus gestalten sich Komponententests dadurch einfacher, dass die Geschäftslogik unabhängig von Benutzeroberflächenkomponenten getestet werden kann.\n\n## Beispielszenario\n\nIn diesem JavaScript-Code werden die Geschäftslogik für die Komponente durch die `Counter`-Komponente konfiguriert und der Benutzeroberflächencode für die Verwendung der Komponente auf einer Webseite definiert.\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## Beispielaufforderung\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## Beispielantwort\n\nCopilot enthält schrittweise Anleitungen zum Umgestalten des Codes.\n\nDurch die vorgeschlagenen Änderungen wird die `Counter`-Komponente so umgestaltet, dass Redux für die Zustandsverwaltung verwendet werden kann. Dazu gehören die Einrichtung eines Redux-Speichers mit einem Anfangszustand und einem Reducer, die Definition einer Inkrementaktion und die Änderung der `Counter`-Komponente, damit diese eine Verbindung mit dem Redux-Speicher herstellt. Abschließend wird die Anwendung mit einer `Provider`-Komponente umschlossen, um den Redux-Speicher für die `Counter`-Komponente verfügbar zu machen. Dadurch wird die Benutzeroberflächenlogik von der Zustandsverwaltung getrennt.\n\nDurch die vorgeschlagenen Änderungen wird der Code in fünf separate Dateien aufgeteilt.\n\n> \\[!NOTE]\n> Copilot Chat Antworten sind nicht deterministisch, daher erhalten Sie möglicherweise eine andere Antwort als die hier beschriebene.\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## Weiterführende Lektüre\n\n* [Prompt-Engineering für GitHub Copilot Chat](/de/copilot/concepts/prompting/prompt-engineering)\n* [Bewährte Methoden für die Verwendung von GitHub Copilot](/de/copilot/get-started/best-practices)"}