Accessing MobX store in vanilla ES6 Javascript class

Question

This one is piece of cake in React. If you want your MobX store to be available in any React component, you just use mobx-react @inject component. Something like:

import React from 'react';
import {inject} from 'mobx-react';

@inject('myStore')
class Dummy extends React.Component {

Then, my store is available as a prop:

this.props.myStore.myMethod();

Nice, convenient... and React only. Maybe I'm missing something, but I can't find a way to access my store from a plain ES6 class. How do I get the same result in a plain ES6 class in pure Vanilla Javascript?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype this might be a good read for you. There is nothing in React, that you can't do in pure Javascript.. By definition.. — Pogrindis, Apr 16 '18 at 10:27
Also another good related read : https://developer.mozilla.org/it/docs/web/javascript/reference/statements/export this.props is nothing too specific to React — Pogrindis, Apr 16 '18 at 10:30
Thank you. I understand that I can pass down the store to the next class and the next class... (it's an object, it should pass as reference). But I was wondering. Is there a "MobX way" that does not involve passing my store all the way down? I mean, "mobx-react" is just a bunch of convenient "code shortcuts" for things that MobX does. — Ignacio Segura, Apr 16 '18 at 10:34
Well, what I am trying to point out is, the MobX for example, breaks down to at it's core, vanilla javascript.. There is no compilation or even transpilation (is that a word?) taking place on the client side.. So it's a mammoth task to write yourself, but that's why libraries are used.. No need to re-invent the wheel, but you should definitely read into the source to see how it's working. — Pogrindis, Apr 16 '18 at 10:38

score 6 · Answer 1 · answered Apr 17 '18 at 11:18

Answer found in MobX GitHub account by adonis-work. Quoting the answer:

Exporting store as a singleton:

// Store.js

import { observable, computed } from 'mobx'

class Store {
  @observable numClicks = 0
  @computed get oddOrEven() {
    return this.numClicks % 2 === 0 ? 'even' : 'odd'
  }
}

const store = new Store()

export default store

... enables us to import and use the active store anywhere in the app as many times we want.

// Component.jsx

import store from Store

// use the global store in any component without passing it
// down through the chain of props from the root node

store.numClicks = 4
console.log(store.oddOrEven)

I am using this approach without problems for some time now. Are there any caveats I should look out for?

Link to source: https://github.com/mobxjs/mobx/issues/605

score 1 · Answer 2 · answered Apr 16 '18 at 14:31

You forgot your code starts with:

import { Store } from "./store";
import { Provider } from "mobx-react";
import * as React from "react";
import { render } from "react-dom";

var store = new Store();
render(
        <Provider {...stores}>
            <Component />
        </Provider>,
        document.getElementById('root'),
    );

Here you have your store variable and you can use it anywhere

If you'd like it even more convenient turn your store into a Singleton

than you can just import it anywhere like:

import { Store, instance } from "./store";

//in store.ts/js
export Store... =
export const instance = new Store(); // your singleton

how it works

the <Provider/> react component puts the Store in its react Context, read here more: https://reactjs.org/docs/context.html.

this means the store is in every child react component of <Provider/>. Inject just simply copies this: this.props.store = this.context.mobx.store.

Thus making a singleton and using this singleton in your 'plain' javascript class (no react subclass/component), is the same thing.

Thank you Joel for your answer. While I'm not trying to use React, your mention of "Singleton" was what I needed to find the right track. — Ignacio Segura, Apr 17 '18 at 11:14
yes, i just explained how it works so you get better sense of what's going on and how you can use it. If it helped you can vote my answer, so people know its helpful answer. — Joel Harkes, Apr 17 '18 at 11:33

Accessing MobX store in vanilla ES6 Javascript class

2 Answers2

how it works