react-mobx - store displayed as a function instead of returning value

Question

I am trying to add mobx to an existing project. The project was bootstraped with create-react app, ejected and then I added mobx on top of it. This is my store so far:

import {observable, action, computed} from 'mobx'

export default class timerStore {
    @observable message = 'THIS IS FROM THE STORE'

    constructor(count, message) {
        this.message = message;
    }

}

I am passing the store to my app in the index component:

render(
  (<Provider timerStore={timerStore}>
      <Router history={hashHistory}>
        <Route component={Main} path="/">
          <IndexRoute component={Tea}/>
          <Route component={About} path="/about"/>
          <Route component={Timer} path="/timer"/>
        </Route>
      </Router>
    </Provider>
  ),
  document.querySelector('#root')
);

And then I am trying to reference it in the Timer component:

@inject("timerStore")
@observer
class Timer extends Component {

    render() {
        const { message } = this.props.timerStore

        return(
            <div className="content-card timer-card">
                <h1 className="title">Tea timer {message}</h1>
            </div>
        )
    }
}

export default Timer;

But the message string is not being shown, and when I check it in the debugger (this.props.timerStore.message), it is showing as undefined.

It is also showing this.props.timerStore as a function that takes count, message as argument.

What am I doing wrong?

I cleared most of the application logic to keep the example simple. If any information needed to help here is missing, please let me know and I will update the question.

Miha Šušteršič Miha Šušteršič · Accepted Answer · 2017-04-17T11:00:22

Basically forgot to create a new store when the app is started. So this is now my index.js:

import React from 'react';
import {render} from 'react-dom';
import {hashHistory, Router, Route, IndexRoute} from 'react-router';

import { Provider } from 'mobx-react';
import timerStore from './Stores/timerStore';

import './reset.css';

import Main from './Main/Main.component';
import Tea from './Tea/Tea.component';
import About from './About/About.component';
import Timer from './Timer/Timer.component';

const store = new timerStore()

render(
  (<Provider timerStore={store}>
      <Router history={hashHistory}>
        <Route component={Main} path="/">
          <IndexRoute component={Tea}/>
          <Route component={About} path="/about"/>
          <Route component={Timer} path="/timer"/>
        </Route>
      </Router>
    </Provider>
  ),
  document.querySelector('#root')
);

react-mobx - store displayed as a function instead of returning value

1 Answers