掌握MobX构建大型项目最佳实践，助力开发效率提升

前端

2024-01-25 15:29:34

在上一篇文章中，我们探讨了MobX在构建大型项目中的优势和注意事项，受到了不少读者的关注。为了帮助大家更好地理解和实践，我决定以一个简单的项目为例，详细介绍MobX在大型项目中的实际应用。

项目结构

项目根目录为./src（可通过package.json内的basePath配置），子目录结构如下：

pages：页面目录，存放各页面的组件和相关逻辑代码。
components：通用组件目录，存放可复用的组件，如按钮、表单等。
services：服务目录，存放与后端交互的逻辑代码。
stores：状态管理目录，存放MobX存储对象，管理应用程序状态。
utils：工具目录，存放一些公共工具函数。

开发流程

我们的开发流程主要分为以下几个步骤：

确定项目需求和功能。
根据需求和功能设计项目结构和组件。
在stores目录中创建MobX存储对象，管理应用程序状态。
在components目录中创建可复用的组件，并使用MobX存储对象管理组件状态。
在pages目录中创建页面组件，并将组件与MobX存储对象连接起来。
在services目录中创建与后端交互的逻辑代码，并与MobX存储对象交互。
使用MobX DevTools调试应用程序。

实践

为了更好地理解MobX在大型项目中的应用，我们以一个简单的投票应用为例。该应用允许用户对候选人进行投票，并实时显示投票结果。

首先，我们在stores目录中创建了一个名为voteStore的MobX存储对象，该存储对象管理着候选人列表和投票结果。

import { observable, action } from "mobx";

class VoteStore {
  @observable candidates = [];
  @observable votes = {};

  @action addCandidate(candidate) {
    this.candidates.push(candidate);
  }

  @action vote(candidate) {
    this.votes[candidate] = (this.votes[candidate] || 0) + 1;
  }
}

export default new VoteStore();

然后，我们在components目录中创建了一个名为CandidateList的可复用组件，该组件用于显示候选人列表和投票按钮。

import React from "react";
import { observer } from "mobx-react";
import VoteStore from "../stores/voteStore";

const CandidateList = observer(() => {
  const { candidates, votes } = VoteStore;

  return (
    <ul>
      {candidates.map((candidate) => (
        <li key={candidate}>
          {candidate}
          <button onClick={() => VoteStore.vote(candidate)}>Vote</button>
          <span>{votes[candidate] || 0}</span>
        </li>
      ))}
    </ul>
  );
});

export default CandidateList;

最后，我们在pages目录中创建了一个名为VotePage的页面组件，该组件使用CandidateList组件来显示候选人列表和投票按钮，并与voteStore存储对象连接起来。

import React from "react";
import CandidateList from "../components/CandidateList";
import VoteStore from "../stores/voteStore";

const VotePage = () => {
  return (
    <div>
      <h1>Vote for your favorite candidate</h1>
      <CandidateList />
    </div>
  );
};

export default VotePage;