Question

我是React的新手，我现在已经使用了大约3个月，.jsx是一种优美的语言。

我想我已经在线阅读了有关MobX和多家商店的所有文章。我看过＃34;官方很棒的名单＆＃34;在MobX官方网站上找到了下面链接中的repo，其中有一些类似的用例与我试图实现的目标相同：

https://github.com/gothinkster/react-mobx-realworld-example-app

我正在使用这个单页应用程序（SPA），它用于数据可视化。它正在被我之前的其他人工作，这是我第一次看到函数式编程，Promises，异步代码以及Java Script提供的所有好东西，所以我阅读了一些文章，在线学习了一些课程，在使用React / MobX / React路由器时做了一些关于最佳实践的阅读，我并不是说我完全理解它的一切，但我知道足够多了。

在做一些阅读时，我发现很多人使用与下面的repo相同的样板文件，这与我工作目录中的内容完全相同：

https://github.com/mhaagens/react-mobx-react-router4-boilerplate

所以我开始阅读更多内容，了解这样做的好处是什么。样板src / stores / stores.js只使用一个商店。

    import { store } from "rfx-core";

    import AppState from "./AppState";

    export default store.setup({
        appState: AppState
    });

在正式的MobX网站上，它说

＆＃34;大多数应用程序受益于至少拥有两家商店。一个用于UI状态，一个用于域状态。将这两者分开的优点是您可以普遍地重用和测试域状态，并且您可以很好地在其他应用程序中重用它。然而，ui-state-store通常非常适合您的应用程序＆＃34;

我很确定我无法在其他任何地方使用此代码，因为要求非常具体，而且我相当确定状态不会变得太大，因此代码拆分不是一个大问题如果appState是一个导出的类，那么我肯定可以在Jest上阅读更多信息然后导入商店并开始编写测试？如果我只有一家商店，那么这种方式的测试会是一场灾难吗？

如果我想拥有多个商店，那么MobX网站说我可以像这样制作一个rootStore。

    class RootStore {
      constructor() {
        this.userStore = new UserStore(this)
        this.todoStore = new TodoStore(this)
      }
    }

那么这可能吗？或者我必须使用某种单身人士。

    import { store } from "rfx-core";

    import RootStore from "./RootStore";

    export default store.setup({
        rootStore: RootStore
    });

我试图避免过多的复杂性。制作商店＆＃34; talk＆＃34;相互之间保持状态同步可能是一种痛苦。如果我有多家商店，会有很大的好处吗？

让一个MobX商店减慢我的应用程序吗？

拥有多个MobX商店会加速我的应用吗？

如果我有多个商店和根商店并将其传递给组件，如

    @inject("store")
    @observer
    export default class MyComponent extends React.Component {

        constructor(props) {
          super(props);
          this.userStore = this.props.store.rootStore.userStore;
          this.uiStore = this.props.store.rootStore.uiStore;
        }

        render() {
                  return(
                           <div>some stuff</div>
                        );
                 }
    }

我到底是不是经过同样大小的商店？

我只是通过让所有商店互相交流而不仅仅是拥有一家商店来增加复杂性并可能减慢我的应用程序的速度？

为什么大家都在网上说使用React / MobX的多个商店

0 个答案: