{"meta":{"title":"Desacoplamiento de la lógica de negocios de los componentes de interfaz de usuario","intro":"Copilot Chat puede ayudarle a separar la lógica de negocios del código de la interfaz de usuario, lo que facilita el mantenimiento y escalado de la aplicación.","product":"GitHub Copilot","breadcrumbs":[{"href":"/es/copilot","title":"GitHub Copilot"},{"href":"/es/copilot/tutorials","title":"Tutoriales"},{"href":"/es/copilot/tutorials/copilot-cookbook","title":"Recetario de GitHub Copilot"},{"href":"/es/copilot/tutorials/copilot-cookbook/refactor-code","title":"Refactorización de código"},{"href":"/es/copilot/tutorials/copilot-cookbook/refactor-code/decouple-business-logic","title":"Desacoplamiento de la lógica de negocios"}],"documentType":"article"},"body":"# Desacoplamiento de la lógica de negocios de los componentes de interfaz de usuario\n\nCopilot Chat puede ayudarle a separar la lógica de negocios del código de la interfaz de usuario, lo que facilita el mantenimiento y escalado de la aplicación.\n\nEn muchos marcos de front-end, la lógica de negocio puede insertarse en los componentes de la interfaz de usuario (UI), lo que dificulta el mantenimiento o la extensión del código, sobre todo a medida que crece la aplicación.\n\nCopilot Chat puede ayudarle a refactorizar su código para extraer la lógica de negocio a servicios independientes o soluciones de gestión del estado. Esto permite reutilizar dicha lógica en distintos componentes de la interfaz de usuario. También facilita el escalado del código al separar los intereses y reducir las interdependencias; además, simplifica las pruebas unitarias al permitir que la lógica de negocios se pruebe con independencia de los componentes de la interfaz de usuario.\n\n## Escenario de ejemplo\n\nEn este código JavaScript, el elemento `Counter` configura la lógica de negocio para el componente y también define el código de interfaz de usuario para usar el componente en una página 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## Mensaje de ejemplo\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## Respuesta de ejemplo\n\nCopilot proporciona instrucciones paso a paso para refactorizar el código.\n\nLos cambios sugeridos refactorizan el componente `Counter` a fin de usar Redux para la administración de estado. Esto incluye la configuración de un almacén de Redux con un estado inicial y un reductor, la definición de una acción incremental y la modificación del componente `Counter` para conectarse al almacén de Redux. Por último, la aplicación se encapsula con un componente `Provider` para poner el almacén de Redux a disposición del componente `Counter`. Esto separa la lógica de la interfaz de usuario de la administración de estado.\n\nLos cambios propuestos separan el código en cinco archivos independientes.\n\n> \\[!NOTE]\n> Copilot Chat las respuestas son no deterministas, por lo que puede obtener una respuesta diferente de la que se describe aquí.\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## Lectura adicional\n\n* [Ingeniería de mensajes para GitHub Copilot Chat](/es/copilot/concepts/prompting/prompt-engineering)\n* [Procedimientos recomendados para usar GitHub Copilot](/es/copilot/get-started/best-practices)"}