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