# Entkoppeln der Geschäftslogik von Benutzeroberflächenkomponenten

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.

Viele 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.

Copilot 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.

## Beispielszenario

In 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.

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

## Beispielaufforderung

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

## Beispielantwort

Copilot enthält schrittweise Anleitungen zum Umgestalten des Codes.

Durch 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.

Durch die vorgeschlagenen Änderungen wird der Code in fünf separate Dateien aufgeteilt.

> \[!NOTE]
> Copilot Chat Antworten sind nicht deterministisch, daher erhalten Sie möglicherweise eine andere Antwort als die hier beschriebene.

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

## Weiterführende Lektüre

* [Prompt-Engineering für GitHub Copilot Chat](/de/copilot/concepts/prompting/prompt-engineering)
* [Bewährte Methoden für die Verwendung von GitHub Copilot](/de/copilot/get-started/best-practices)