{"meta":{"title":"Отключение бизнес-логики от компонентов пользовательского интерфейса","intro":"Copilot Chat может помочь отделить бизнес-логику от кода пользовательского интерфейса, что облегчает поддержку и масштабирование приложения.","product":"GitHub Copilot","breadcrumbs":[{"href":"/ru/copilot","title":"GitHub Copilot"},{"href":"/ru/copilot/tutorials","title":"Учебники"},{"href":"/ru/copilot/tutorials/copilot-cookbook","title":"Кулинарная книга GitHub Copilot"},{"href":"/ru/copilot/tutorials/copilot-cookbook/refactor-code","title":"Код рефакторинга"},{"href":"/ru/copilot/tutorials/copilot-cookbook/refactor-code/decouple-business-logic","title":"Разделение бизнес-логики"}],"documentType":"article"},"body":"# Отключение бизнес-логики от компонентов пользовательского интерфейса\n\nCopilot Chat может помочь отделить бизнес-логику от кода пользовательского интерфейса, что облегчает поддержку и масштабирование приложения.\n\nВо многих интерфейсных платформах бизнес-логика может быть внедрена в компоненты пользовательского интерфейса, что затрудняет обслуживание или расширение кода, особенно по мере роста приложения.\n\nCopilot Chat может помочь вам рефакторить ваш код, чтобы извлечь бизнес-логику в отдельные сервисы или решения для управления состоянием. Это позволяет повторно использовать бизнес-логику для разных компонентов пользовательского интерфейса. Он также упрощает масштабирование кода, разделяя проблемы и уменьшая взаимозависимости, и упрощает модульное тестирование, позволяя бизнес-логике тестироваться независимо от компонентов пользовательского интерфейса.\n\n## Пример сценария\n\nВ этом коде `Counter` JavaScript компонент настраивает бизнес-логику для компонента, а также определяет код пользовательского интерфейса для использования компонента на веб-странице.\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## Пример запроса\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## Пример ответа\n\nCopilot предоставляет пошаговые инструкции по рефакторингу кода.\n\nПредлагаемые изменения рефакторинг `Counter` компонента для использования Redux для управления состоянием. Это включает настройку хранилища Redux с начальным состоянием и сокращением, определение действия добавочного действия и изменение `Counter` компонента для подключения к хранилищу Redux. Наконец, приложение упаковывается с компонентом `Provider` , чтобы сделать хранилище Redux доступным для `Counter` компонента. Это отделяет логику пользовательского интерфейса от управления состоянием.\n\nПредложенные изменения разделяют код на пять отдельных файлов.\n\n> \\[!NOTE]\n> Copilot Chat Ответы не детерминированы, поэтому вы можете получить другой ответ, чем описанный здесь.\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## Дополнительные материалы\n\n* [Инженерия подсказок для GitHub Copilot Chat](/ru/copilot/concepts/prompting/prompt-engineering)\n* [Лучшие практики использования GitHub Copilot](/ru/copilot/get-started/best-practices)"}