Entkoppeln der Geschäftslogik von Benutzeroberflächenkomponenten

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 dich bei der Umgestaltung deines Codes unterstützen, um die 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.

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;

Beispiel für Prompt

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

Beispielantwort

Copilot bietet ausführliche Anweisungen zur Umgestaltung 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

Da die Copilot Chat-Antworten nicht deterministisch sind, erhältst du möglicherweise eine andere Antwort als die hier beschriebene.

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