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

O Copilot Chat pode ajudar você a separar a lógica de negócios do código da interface do usuário, facilitando a manutenção e a escala do aplicativo.

Neste artigo

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.

O Copilot Chat pode ajudar você a refatorar seu código para extrair a lógica de negócios em serviços ou soluções de gerenciamento de estado separadas. 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.

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;

Solicitação de exemplo

Use Redux to separate the UI code from the Counter component in this code.

Exemplo de resposta

O 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

As respostas do Copilot Chat são não determinísticas, portanto, você pode obter uma resposta diferente da mostrada aqui.

actions.js

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

reducer.js

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

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

const store = createStore(counterReducer);

export default store;

counter.js

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

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