组织代码

src/components/ElementGroup.js

@@ -2,10 +2,10 @@ import React from 'react'
 import Element from './Element'
 import ReactAddonsUpdate from 'react-addons-update'
 import autobind from 'autobind-decorator'
-import { observer } from 'mobx-react'
+import { observer, inject } from 'mobx-react';
 
+@inject(["elementGroupStore"]) @observer
 @autobind
-@observer
 export default class ElementGroup extends React.Component {
   cloneElement(element) {
     this.store().cloneElement(element)

src/components/Header.js

@@ -2,12 +2,11 @@ import React from 'react'
 import ModalRepoForm from './ModalRepoForm'
 import Loader from 'halogen/PulseLoader'
 import { Link } from 'react-router-dom'
-import { observer } from 'mobx-react'
+import { observer, inject } from 'mobx-react';
 import autobind from 'autobind-decorator'
-import stores from '../stores'
 
 @autobind
-@observer
+@inject(["headerStore"]) @observer
 export default class Header extends React.Component {
   componentDidMount() {
     this.props.headerStore.loadHeaderData()
@@ -41,7 +40,7 @@ export default class Header extends React.Component {
 
     return (
       <div className="text-left top-header">
-        <ModalRepoForm handleNewRepo={ this.addRepo } modalRepoFormStore={ stores.ModalRepoFormStore } />
+        <ModalRepoForm handleNewRepo={ this.addRepo } />
         <div className='col-md-10'>
           { result }
         </div>

src/components/ModalRepoForm.js

@@ -3,10 +3,10 @@ import { Modal, Button } from 'react-bootstrap'
 import EventEmitter from '../libs/eventEmitter'
 import $ from 'jquery'
 import autobind from 'autobind-decorator'
-import { observer } from 'mobx-react'
+import { observer, inject } from 'mobx-react';
 
+@inject(["modalRepoFormStore"]) @observer
 @autobind
-@observer
 export default class ModalRepoForm extends React.Component {
   store() {
     return this.props.modalRepoFormStore
@@ -17,6 +17,7 @@ export default class ModalRepoForm extends React.Component {
   }
 
   open() {
+    console.log(this);
     this.store().open();
   }
 

src/containers/Spd.js

@@ -3,7 +3,6 @@ import ElementGroup from '../components/ElementGroup'
 import Header from '../components/Header'
 import AlertContainer from 'react-alert'
 import EventEmitter from '../libs/eventEmitter'
-import stores from '../stores'
 
 export default class Spd extends React.Component {
   componentDidMount() {
@@ -39,12 +38,12 @@ export default class Spd extends React.Component {
       <div id="app">
         <AlertContainer ref={a => this.msg = a} {...this.alertOptions} />
         <div className="row">
-          <Header headerStore={ stores.HeaderStore } />
+          <Header />
         </div>
         <div className="row">
           <div className="col-md-2 sidebar" id='sidebar'>
             <h3 className='sidebar-header'>元件</h3>
-            <ElementGroup elementGroupStore={ stores.ElementGroupStore } />
+            <ElementGroup />
           </div>
           <div id="dropzone" className="col-md-10 dropzone">
             {this.props.children}

src/index.js

@@ -8,11 +8,20 @@ import {
 
 import RegionalDesign from './components/RegionalDesign'
 
+import { Provider } from 'mobx-react'
+import elementGroupStore from './stores/ElementGroup'
+import headerStore from './stores/Header'
+import modalRepoFormStore from './stores/ModalRepoForm'
+
+const stores = { elementGroupStore, headerStore, modalRepoFormStore }
+
 ReactDOM.render(
-  <Router handler={Spd} history={Router}>
-    <Spd>
-      <Route path="/web/regional_design/:id" component={RegionalDesign} />
-    </Spd>
-  </Router>,
+  <Provider { ...stores }>
+    <Router handler={Spd} history={Router}>
+      <Spd>
+        <Route path="/web/regional_design/:id" component={RegionalDesign} />
+      </Spd>
+    </Router>
+  </Provider>,
   document.getElementById('root')
 );

src/stores/index.js

-import ModalRepoFormStore from './ModalRepoForm'
-import HeaderStore from './Header'
-import ElementGroupStore from './ElementGroup'
-
-const stores = {
-  ModalRepoFormStore,
-  HeaderStore,
-  ElementGroupStore
-}
-
-export default stores