react-mobx - Speichern als Funktion statt Rückgabewert

Question

Ich versuche, Mobx zu einem bestehenden Projekt hinzuzufügen. Das Projekt wurde mit create-react app gestartet, ausgeworfen und dann habe ich mobx hinzugefügt. Dies ist mein Speicher so weit:

import {beobachtbar, Aktion, berechnet} von 'mobx'

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

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

} 

ich den Laden zu meiner App in der Indexkomponente vorbei:

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') 
); 

Und dann versuche ich, es in der Timer-Komponente zu referenzieren:

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

Aber der Nachrichtenstring wird nicht angezeigt, ein d wenn ich es im Debugger (this.props.timerStore.message) überprüfe, wird es als undefined angezeigt.

Es zeigt auch this.props.timerStore als eine Funktion, die count, message als Argument verwendet.

Was mache ich falsch?

Ich habe die meisten der Anwendungslogik gelöscht, um das Beispiel einfach zu halten. Wenn hier irgendwelche Informationen fehlen, die hier helfen, lass es mich wissen und ich werde die Frage aktualisieren.

Answer 1

Grundsätzlich vergessen, einen neuen Speicher zu erstellen, wenn die App gestartet wird. Also das ist jetzt mein 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') 
);