{"meta":{"title":"Desacoplando a lógica de negócios dos componentes da interface do usuário","intro":"Copilot Chat pode ajudá-lo a separar sua lógica de negócios do código da interface do usuário, facilitando a manutenção e a escala do aplicativo.","product":"GitHub Copilot","breadcrumbs":[{"href":"/pt/copilot","title":"GitHub Copilot"},{"href":"/pt/copilot/tutorials","title":"Tutoriais"},{"href":"/pt/copilot/tutorials/copilot-cookbook","title":"Livro de receitas do GitHub Copilot"},{"href":"/pt/copilot/tutorials/copilot-cookbook/refactor-code","title":"Refatorar o código"},{"href":"/pt/copilot/tutorials/copilot-cookbook/refactor-code/decouple-business-logic","title":"Desacoplar a lógica de negócios"}],"documentType":"article"},"body":"# Desacoplando a lógica de negócios dos componentes da interface do usuário\n\nCopilot Chat pode ajudá-lo a separar sua lógica de negócios do código da interface do usuário, facilitando a manutenção e a escala do aplicativo.\n\nEm muitas estruturas de front-end, a lógica de negócios pode passar a ser incorporada a componentes da interface do usuário, dificultando a manutenção ou a extensão do código, especialmente à medida que o aplicativo cresce.\n\nCopilot Chat pode ajudá-lo a refatorar seu código para extrair a lógica de negócios em serviços separados ou soluções de gerenciamento de estado. Isso permite que a lógica de negócios seja reutilizada em diferentes componentes da interface do usuário. Também facilita a escala do código separando as preocupações e reduzindo as interdependências, e simplifica o teste de unidade permitindo que a lógica de negócios seja testada independentemente dos componentes da interface do usuário.\n\n## Cenário de exemplo\n\nNeste código JavaScript, o componente `Counter` configura a lógica de negócios do componente e também define o código da interface do usuário para usar o componente em uma página da Web.\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## Prompt de exemplo\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## Resposta de exemplo\n\nCopilot fornece instruções passo a passo para refatorar o código.\n\nAs alterações sugeridas refatoram o componente `Counter` para usar Redux para gerenciamento de estado. Isso inclui configurar um repositório Redux com um estado inicial e um redutor, definir uma ação de incremento e modificar o componente `Counter` para se conectar ao repositório Redux. Por fim, o aplicativo é encapsulado com um componente `Provider` para disponibilizar o repositório Redux para o componente `Counter`. Isso separa a lógica da interface do usuário do gerenciamento de estado.\n\nAs alterações propostas separam o código em cinco arquivos.\n\n> \\[!NOTE]\n> Copilot Chat as respostas são não determinísticas, portanto, você pode obter uma resposta diferente daquela descrita aqui.\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## Leitura adicional\n\n* [Engenharia de prompts para o GitHub Copilot Chat](/pt/copilot/concepts/prompting/prompt-engineering)\n* [Práticas recomendadas para usar GitHub Copilot](/pt/copilot/get-started/best-practices)"}