# Desacoplando a lógica de negócios dos componentes da interface do usuário

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.

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

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

## Cenário de exemplo

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

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

## Prompt de exemplo

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

## Resposta de exemplo

Copilot fornece instruções passo a passo para refatorar o código.

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

As alterações propostas separam o código em cinco arquivos.

> \[!NOTE]
> Copilot Chat as respostas são não determinísticas, portanto, você pode obter uma resposta diferente daquela descrita aqui.

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

## Leitura adicional

* [Engenharia de prompts para o GitHub Copilot Chat](/pt/copilot/concepts/prompting/prompt-engineering)
* [Práticas recomendadas para usar GitHub Copilot](/pt/copilot/get-started/best-practices)