是否建议每个页面都有一个 mobx Store？答案

【问题标题】：Is it recommended to have a mobx Store for each page?是否建议每个页面都有一个 mobx Store？
【发布时间】：2020-02-24 17:22:58
【问题描述】：

我正在构建一个单页面应用程序，前端使用 Reactjs 和 MobX（端口 3000），后端使用 Nodejs 和 Express（API，端口 4000）。我对 MobX 和 Reactjs 都是新手，我正在尝试建立一个结构良好的项目。我的问题是：每个视图都有一个商店可以吗？

例如，我有一个 UserStore，它存储 Session 信息并负责平台内用户的登录和注销。但是，登录后，我想将用户重定向到仪表板页面。此仪表板页面必须检索有关用户的信息，但它还必须联系 API 并检索一些数据（即一些 Todos）。我会这样做：

这是重定向到仪表板的登录功能：

*UserStore.js*

[...]
import  navigationStore  from './NavigationStore';

[...]

login = async (user) => {
  try {
    const res = await axios.post('/session/login', { 
      username: user.username, 
      password: user.password 
    });

    this.saveUser(res.data);
    navigationStore.push('/dashboard'); 
  } catch (error) {
    [...]
  }
}

然后，我创建了一个 DashboardStore.js，其中包含以下代码：

*DashboardStore.js*

[... imports and initializations ...]
class Store {

  @observable todos = null

  constructor() {
    this.getDashboard();
  }

  @action('Load dashboard') getDashboard =  async () => { 
    const res = await axios.get('/api/dashboard/', {});    
    this.todos = res.todos
  }

}

const DashboardStore = new Store();

export default DashboardStore;

但这意味着我最终会为 Todos 页面创建另一个 Store，并为我需要的任何页面创建另一个 Store。在 NodeJs 中，您可以为每个类创建一个控制器，这并不奇怪。但是，我不确定它在 MobX 上是如何工作的。

【问题讨论】：

标签： javascript node.js reactjs store mobx

【解决方案1】：

这取决于您的应用程序的复杂性。我不会为每个视图或关注点创建一个商店，但您可以创建两个，就像 MobX 文档推荐的那样：https://mobx.js.org/best/store.html。

我现在正在做一个更大的项目，我们从一个商店开始，一切都可以。显然，随着我们不断添加功能，它增长了很多，所以我认为我们可能会在某个时候拆分它以降低复杂性。

【讨论】：