react-mobx - 값을 반환하는 대신 함수로 표시합니다.

Question

기존 프로젝트에 mobx를 추가하려고합니다. 프로젝트는 create-react 앱으로 부트 스트랩되어 꺼내졌고, 그 위에 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') 
); 

그런 다음 타이머 구성 요소에서 참조하려고합니다.

@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)에서 검사 할 때 정의되지 않은 것으로 표시됩니다.

또한 count, 인수가 message 인 함수로 this.props.timerStore이 표시됩니다.

내가 뭘 잘못하고 있니?

예제를 단순하게 유지하기 위해 대부분의 응용 프로그램 논리를 정리했습니다. 여기에 도움이 필요한 정보가 빠진 경우 알려 주시면 질문을 업데이트하겠습니다.

Answer 1

기본적으로 앱을 시작할 때 새 스토어를 만드는 것을 잊었습니다. 이제 내 색인입니다 .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') 
);