Отключение бизнес-логики от компонентов пользовательского интерфейса

Copilot Chat помогает отделять бизнес-логику от кода пользовательского интерфейса, что упрощает обслуживание и масштабирование приложения.

В этой статье

Во многих интерфейсных платформах бизнес-логика может быть внедрена в компоненты пользовательского интерфейса, что затрудняет обслуживание или расширение кода, особенно по мере роста приложения.

Copilot Chat может помочь рефакторингу кода для извлечения бизнес-логики в отдельные службы или решения управления состоянием. Это позволяет повторно использовать бизнес-логику для разных компонентов пользовательского интерфейса. Он также упрощает масштабирование кода, разделяя проблемы и уменьшая взаимозависимости, и упрощает модульное тестирование, позволяя бизнес-логике тестироваться независимо от компонентов пользовательского интерфейса.

Пример сценария

В этом коде Counter JavaScript компонент настраивает бизнес-логику для компонента, а также определяет код пользовательского интерфейса для использования компонента на веб-странице.

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;

Пример запроса

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

Пример отклика

Copilot предоставляет пошаговые инструкции по рефакторингу кода.

Предлагаемые изменения рефакторинг Counter компонента для использования Redux для управления состоянием. Это включает настройку хранилища Redux с начальным состоянием и сокращением, определение действия добавочного действия и изменение Counter компонента для подключения к хранилищу Redux. Наконец, приложение упаковывается с компонентом Provider , чтобы сделать хранилище Redux доступным для Counter компонента. Это отделяет логику пользовательского интерфейса от управления состоянием.

Предложенные изменения разделяют код на пять отдельных файлов.

Note

Ответы Copilot Chat являются недетерминированными, поэтому вы можете получить другой ответ, описанный здесь.

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

Дополнительные материалы