react-mobx - 存储显示为函数而不是返回值

Question

我正在尝试将mobx添加到现有项目。该项目引导与创建反应的应用程序，弹出，然后我在其上添加mobx。这是迄今为止我的商店：

进口{观察到，动作，计算}从 'mobx'

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

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

} 

我路过商店我的应用程序在指数成份：

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

然后我试图在Timer组件中引用它：

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

但是消息字符串未显示， d当我在调试器（this.props.timerStore.message）中检查它时，它显示为未定义。

它也显示this.props.timerStore作为一个函数，需要count，message作为参数。

我在做什么错？

我清除了大部分应用程序逻辑以保持示例简单。如果缺少帮助的任何信息，请告诉我，我会更新问题。

Answer 1

基本上忘了创建一个新的商店，当应用程序启动。所以这现在是我的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') 
);