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

En muchos marcos de front-end, la lógica de negocios 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.

El Copilot Chat puede ayudarte a refactorizar el código a fin de extraer lógica de negocios en distintos servicios independientes o soluciones de administración de 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 negocios para el componente y también define el código de interfaz de usuario para usar el componente en una página 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;

Ejemplos de indicaciones

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.

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

Información adicional

• "Solicitud de ingeniería para GitHub Copilot"
• "Procedimientos recomendados para usar GitHub Copilot"