4

I am a bit of a newbie to React, Ive been using it now for about 3 months, .jsx is a beautiful language.

I think I've read every article online about MobX and multiple stores. I have looked at "the official awesome list" on the MobX official site and found the repo in the link below which has a few similar use cases to what I'm trying to achieve :

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

I've got this Single Page App(SPA) I am working on, its for data visualization. It was being worked on by someone else before me and it was the first time I'd seen functional programming, Promises, async code and all that good stuff that Java Script offers, so I read some articles, took some courses online and done some reading about best practices when using React/MobX/React Router, I'm not saying I fully understand everything about it, but I know enough to get by.

While doing some reading I found a lot of people using the same boilerplate as the repo below, which is the exact same as whats in my working directory:

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

So i started reading more to find out what the benefits are of doing it this way. The boilerplate src/stores/stores.js only uses one store.

    import { store } from "rfx-core";

    import AppState from "./AppState";

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

On the offical MobX site it says

"Most applications benefit from having at least two stores. One for the UI state and one or more for the domain state. The advantage of separating those two is you can reuse and test domain state universally, and you might very well reuse it in other applications. The ui-state-store however is often very specific for your application"

I'm pretty sure i wont be able to use this code anywhere else because the requirements are so specific and I'm fairly sure state will not become too big so code splitting is not that big of an issue.If appState was a class that exports then surely I could read up more on Jest then just import the store and start writing tests ? Will testing this way be a disaster if I just have one store ?

If I wanted to have multiple stores then the MobX site says I can make a rootStore like this.

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

then is this possible ? Or will i have to use some kind of Singleton.

    import { store } from "rfx-core";

    import RootStore from "./RootStore";

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

I am trying to avoid too much complexity. Making the stores "talk" to each other and keeping state in sync could be a pain. Will there be big benefits if I have multiple stores ?

Will having one MobX store slow down my app ?

Will having multiple MobX stores speed up my app ?

If I had multiple stores and a root store and passed it round the Components like 

    @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>
                        );
                 }
    }

Am I not passing around the same size of a store anyway ?

Am I just adding complexity and possibly slowing down my app by making all the stores talk to each other, rather than just having one store ?

Michael Anthony
  • 41
  • 1
  • 5
  • 1
    this isn't any blog website . please be specific and write as short as possible. –  Jan 17 '18 at 13:57
  • 3
    The questions are marked with question marks. This topic needs to be explained before questions can be asked. In the guidelines it says to show your research.. If someone wants to answer this question then they can feel free to add any advice they think would be relevant. – Michael Anthony Jan 17 '18 at 14:41
  • Well, I, for one, use multiple stores because the sheer complexity of our current project demands active separation of the codebase into smaller parts *just to comprehend how it works*, but I believe many opinionated answers can exist to this question. – John Weisz Jan 17 '18 at 14:53
  • Thanks for the reply John. I am aware this can be an opinionated topic as lots of people use multiple stores to break up certain projects and it works for them, I have tried to make my question less opinionated by providing as much info as possible in the hope of someone answering it. How do you get your stores to talk to each other ? Do you follow some kind of MVC design pattern ? What works best for you ? Do you use rfx-core or some kind of singleton ? How big is the project ? Do you have many tests ? How long are your loading times ? – Michael Anthony Jan 17 '18 at 15:09
  • Hey! I had the same doubts. You can find the more ideal way on [this](https://stackoverflow.com/questions/54393475/correct-way-of-creating-multiple-stores-with-mobx-and-injecting-it-into-to-a-com) similar question of mine. If you have any doubts I can clear them. – uneet7 Feb 08 '19 at 21:28

0 Answers0