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 Bate-papo do Copiloto 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.
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; Use Redux to separate the UI code from the Counter component in this code. 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.
Observação
Respostas do Bate-papo do Copiloto são não determinísticas, portanto, você pode obter uma resposta diferente da descrita 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') );