如何在redux中仅更改单个状态时防止其他组件重新呈现

const initialState = {
  counter: 0,
  username: "",
  // 其他状态...
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case "UPDATE_COUNTER":
      // 仅更改counter状态，其他状态保持不变
      return {
        ...state,
        counter: action.payload,
      };
    case "UPDATE_USERNAME":
      // 仅更改username状态，其他状态保持不变
      return {
        ...state,
        username: action.payload,
      };
    // 其他操作...
    default:
      return state;
  }
}

import { useSelector, useDispatch } from "react-redux";

function CounterComponent() {
  const counter = useSelector((state) => state.counter);
  const dispatch = useDispatch();

  const handleIncrement = () => {
    // 仅更新counter状态，其他状态保持不变
    dispatch({ type: "UPDATE_COUNTER", payload: counter + 1 });
  };

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}