正确使用 MobX 管理 React 组件中的比较状态

Question

我是 React 和 MobX 的初学者，我正在开发一个项目，需要管理比较公司的状态。我想确保我遵循最佳实践并且不与 MobX 文档相矛盾。

我有一个 ComparisonButton 组件，允许用户在比较列表中添加或删除公司。我正在使用 MobX 来管理比较公司的状态。以下是我的实现：

比较按钮组件：

const ComparisonButton = ({ companyId, isCompared }) => {
  const store = useStore();
  const axiosAuth = useAxiosAuth();
  const notification = useNotificationCtx();
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    if (isCompared !== store.isCompanyCompared(companyId)) {
      store.setIsCompared(companyId, isCompared);
    }
  }, []);


  const localIsCompared = store.isCompanyCompared(companyId);


  const addToComparison = async () => {
    try {
      const response = await axiosAuth.post("/api/add", { companyId });
      store.setIsCompared(companyId, true);
    } catch (error) {

    } finally {
     
    }
  };


  const deleteFromComparison = async () => {
    try {
       const response = await axiosAuth.post("/api/delete", { companyId });
      store.setIsCompared(companyId, false);
    } catch (error) {

    } finally {
     
    }
  };

  return (
      <Button
        onClick={localIsCompared ? deleteFromComparison : addToComparison}
        icon={<BiSolidAddToQueue color={localIsCompared ? "#1677ff" : "#71717a"} size={20} />}
      />
  );
};

export default observer(ComparisonButton);

MobX 商店：

import { makeAutoObservable } from "mobx";

class Store {
  comparedCompanies = new Map();

  constructor() {
    makeAutoObservable(this);
  }

  setIsCompared(companyId, isCompared) {
    if (this.comparedCompanies.get(companyId) !== isCompared) {
      this.comparedCompanies.set(companyId, isCompared);
      console.log(`Company ${companyId} comparison state changed to ${isCompared}`);
    }
  }

  isCompanyCompared(companyId) {
    return this.comparedCompanies.get(companyId) || false;
  }
}

const store = new Store();
export default store;

我的问题： 我使用 useEffect 来初始化比较状态是否正确？我用它来设置组件安装时的初始比较状态。 我是否正确管理与 MobX 的比较状态？具体来说，方法 setIsCompared 和 isCompanyCompared。 我是否缺少任何改进或最佳实践，可以使我的 MobX 集成更加高效或惯用？ 任何有关此实施的建议或反馈将不胜感激。

谢谢！

我使用 React 和 MobX 实现 ComparisonButton 组件，如上所示。我的期望是该组件能够正确更新每个公司的比较状态并反映 UI 中的更改。

该组件在大多数情况下都按预期工作，但我不完全确定我设置和获取 MobX 比较状态的方法是否遵循最佳实践。具体来说，我想确认一下：

Answer 1

我相信你的逻辑过于复杂，我不太确定父组件是什么样子以及它如何管理它的状态，但我认为这是一个更清晰的方法：

// ComparisonButton Component:
const ComparisonButton = ({ companyId = "" }) => {
    const store = useStore();
    const isCompared = store.isCompanyCompared(companyId);
    const isInComparingAction = store.isCompanyInComparingAction(companyId);

    return (
        <Button
            onClick={() => store.changeCompanyComparison(companyId, !isCompared)}
            icon={<BiSolidAddToQueue color={isCompared ? "#1677ff" : "#71717a"} size={20} />}
            disabled={isInComparingAction}
        />
    );
};

// MobX Store
class Store {
    comparedCompanies = {};
    companiesInComparingAction = {};

    constructor() {
        makeAutoObservable(this);
    }

    changeCompanyComparison = (companyId, newComparisonValue) => {
        const endpoint = newComparisonValue ? "/api/add" : "/api/delete";
        this.companiesInComparingAction[companyId] = true;
        axiosAuth
            .post(endpoint, { companyId })
            .then(() => {
                this.comparedCompanies[companyId] = newComparisonValue;
                console.log(`Company ${companyId} comparison state changed to ${newComparisonValue}`);
            })
            .catch((error) => {
                console.error(error);
            })
            .finally(() => {
                this.companiesInComparingAction[companyId] = false;
            });
    };

    isCompanyCompared(companyId) {
        return this.comparedCompanies[companyId] || false;
    }

    isCompanyInComparingAction(companyId) {
        return this.companiesInComparingAction[companyId] || false;
    }
}

现在 ComparisonButton 组件只是显示数据并使用商店中的操作。商店本身包含所有逻辑。