내가 여기에 반응 라우터 (3)를 사용하고있어 mobx 제공

Question

에서 가게를받을 수 없다는 것은 내 경로에 대한 코드입니다 :

: 여기

export default (
    <Route> 
    <Route path="login" component={LoginPage}/> 
    <Route path="/" component={App}> 
     <IndexRoute component={Dashboard}/> 
     <Route path="dashboard" component={Dashboard}/> 
     <Route path="form" component={FormPage}/> 
     <Route path="table" component={TablePage}/> 
     <Route path="*" component={NotFoundPage}/> 
    </Route> 
    </Route> 
); 

내 주요 내가 mobx-react에서 Provider을 포함 Index.js입니다

import React from 'react'; 
import { render } from 'react-dom'; 
import { Router, browserHistory } from 'react-router'; 
import routes from './routes'; 
import { Provider } from 'mobx-react'; 
import injectTapEventPlugin from 'react-tap-event-plugin'; 
require('./favicon.ico'); 
import './styles.scss'; 
import 'font-awesome/css/font-awesome.css'; 
import 'flexboxgrid/css/flexboxgrid.css'; 
import store from './Store.js'; 

injectTapEventPlugin(); 

render(
    <Provider store={store}><Router routes={routes} history={browserHistory} /></Provider>, document.getElementById('app') 
); 

store.js 은 다음과 같습니다

import { autorun, observable } from 'mobx'; 

class appStore { 
    @observable userSession = { 
       isUserLogged: false, 
       id: 0, 
       name: '', 
       token: '', 
       memberId: 0, 
       membershipId: 1000 
      } 
} 

let store = window.store = new appStore; 

export default store; 

//test 
autorun(()=> { 
    console.log(JSON.stringify(store.userSession)); 
}) 

이미 반응 애플 리케이션을위한 mobx를 설치했습니다. autorun은 내 가게를 기록 할 수 있습니다. 그런 다음 라우터 주위에 Provider을 추가하고 내 App.js에 소품을 기록하려고합니다. 내 가게를 전혀받지 못합니다.

App 구성 요소에 @observer을 추가했으며 내 저장소가 통과되었는지 확인하기 위해 내 소품을 기록하려고 시도했지만 얻지 못했습니다.

누구나 아는 이유는 무엇입니까? 미리 감사드립니다.

Answer 1

처음에는 창 개체 (window.store)에 저장소를 사용할 수 있으므로 하위 구성 요소의 저장소를 통해 저장소에 액세스 할 수 있습니다. 그러나 전역 변수는 피해야합니다!

<Provider>은 단순히 컨텍스트를 통해 상점을 사용할 수 있도록하는 편리한 메소드로 작동합니다. 다른 구성 요소를 사용할 수있게하려면 <Provider>과 함께 작동하여 데코 레이팅 된 구성 요소 소품에 추가하는 데코레이터 @inject을 사용할 수 있습니다.

모듈 시스템을 사용함에 따라 모듈을 필요로하는 각 구성 요소에 import 저장소를 저장하고 글로벌 창 범위 또는 <Provider>에 의존하지 않아도됩니다.