# Desacoplamiento de la lógica de negocios de los componentes de interfaz de usuario

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.

En 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.

Copilot 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.

## Escenario de ejemplo

En 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.

```javascript id=counter-component
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;
```

## Mensaje de ejemplo

```copilot copy prompt ref=counter-component
Use Redux to separate the UI code from the Counter component in this code.
```

## Respuesta de ejemplo

Copilot proporciona instrucciones paso a paso para refactorizar el código.

Los 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.

Los cambios propuestos separan el código en cinco archivos independientes.

> \[!NOTE]
> Copilot Chat las respuestas son no deterministas, por lo que puede obtener una respuesta diferente de la que se describe aquí.

### actions.js

```javascript
export const increment = () => ({
  type: 'INCREMENT'
});
```

### reducer.js

```javascript
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

```javascript
import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;
```

### counter.js

```javascript
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

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

## Lectura adicional

* [Ingeniería de mensajes para GitHub Copilot Chat](/es/copilot/concepts/prompting/prompt-engineering)
* [Procedimientos recomendados para usar GitHub Copilot](/es/copilot/get-started/best-practices)