时间戳

首页 > 解决方案 > 是否建议每个页面都有一个mobx Store？

javascript - 是否建议每个页面都有一个mobx Store？

问题描述

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

例如，我有一个 UserStore，它存储 Session 信息并负责平台内用户的登录和注销。但是，登录后，我想将用户重定向到仪表板页面。此仪表板页面必须检索有关用户的信息，但它还必须联系 API 并检索一些数据（即 Some 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 上是如何工作的。

标签： javascriptnode.jsreactjsstoremobx

解决方案

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

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

推荐阅读