将业务逻辑从 UI 组件中解耦 - GitHub 文档

在许多前端框架中，业务逻辑可能会嵌入到用户界面（UI）组件中，导致代码难以维护或扩展，特别是随着应用程序的增长。

Copilot Chat 可帮助您重构代码，将业务逻辑提取到独立的服务或状态管理方案中。这使得业务逻辑能够在不同的 UI 组件之间复用。通过分离关注点并减少相互依赖，它还能使代码更易于扩展，并通过让业务逻辑能够独立于 UI 组件进行测试，从而简化单元测试。

示例情景

在这段 JavaScript 代码中，Counter 组件配置了该组件的业务逻辑，同时也定义了在网页中使用该组件的 UI 代码。

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;

示例提示

Copilot 提示使用 Redux 将 UI 代码与此代码中的 Counter 组件分离。

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.

建议的更改将 Counter 组件重构为使用 Redux 进行状态管理。这包括设置一个具有初始状态和 reducer 的 Redux store、定义一个 increment（递增）动作，以及修改 Counter 组件以连接到 Redux store。最后，应用程序会被 Provider 组件包裹，以便让 Redux store 对 Counter 组件可用。这样就实现了 UI 逻辑与状态管理的分离。

建议的更改将代码拆分为五个独立的文件。

注意

Copilot Chat 的响应是非确定性的，因此您可能会得到与此处描述的不同的响应。

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

将业务逻辑与 UI 组件解耦

本文内容