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

Chat de Copiloto 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 este artículo

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.

Chat de Copiloto 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.

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

Nota:

Chat de Copiloto las respuestas son no deterministas, por lo que puede obtener una respuesta diferente de la que se describe aquí.

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

Lectura adicional