Forráskód Böngészése

dva使用测试(注意:该版本运行会报错)

zhuth 7 éve
szülő
commit
183cdd7bd1

BIN
app/assets/yay.jpg


+ 9 - 0
app/components/Example.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Example = () => {
+  return <div>Example</div>;
+};
+
+Example.propTypes = {};
+
+export default Example;

+ 11 - 37
app/components/chartDesigner/header.jsx

@@ -3,46 +3,20 @@ import { Input, Select, Icon, Button } from 'antd';
 import emitter from '../../eventManger/ev';
 const Option = Select.Option;
 import './header.less';
+import { connect } from 'dva';
+import title from '../../models/title';
 
-class Header extends React.Component {
-    constructor(props) {
-        super(props);
-		this.state = {
-			title: props.chartTitle || '未命名'
-		};
-    }
 
-    componentDidMount() {
-        // 在组件装载完成后发布事件
-        this.eventEmitter = emitter.addListener('headersettitle', (title)=>{
-            this.setState({
-                title
-            });
-        });
-    }
-
-    componentWillUnmount() {
-        emitter.removeAllListeners('headersettitle');
-    }
-
-    emit(eventName, params) {
-        emitter.emit(eventName);
-    }
-
-    titleChange() {
-        
-    }
-
-    render() {
-        const { emptyTitle, title } = this.state;
-
-        return <div className='header'>
+const Header = connect(({ title: { title } }) => ({
+    title,
+}))(props => {
+    return (
+        <div className='header'>
             <div className='header-item toolbar-title'>
                 <Input className='input-title' 
                     width={200} 
-                    addonAfter={<Icon type="edit" />} 
-                    value={title}
-                    onChange={this.titleChange}
+                    addonAfter={<Icon type="edit" onClick={props.dispatch({ type: 'title/set', text: '测试标题' })}/>} 
+                    value={props.title}
                 />
             </div>
             <div className='header-item toolbar-buttons'>
@@ -54,7 +28,7 @@ class Header extends React.Component {
                 </div>
             </div>
         </div>
-    }
-}
+    )
+});
 
 export default Header;

+ 21 - 0
app/index.js

@@ -0,0 +1,21 @@
+import dva from 'dva';
+
+// 1. Initialize
+const app = dva({
+    onReducer: reducer => (state, action) => {
+        return { ...state};
+    },
+});
+
+// 2. Plugins
+// app.use({});
+
+// 3. Model
+app.model(require('./models/example'));
+app.model(require('./models/title'));
+
+// 4. Router
+app.router(require('./router'));
+
+// 5. Start
+app.start('#root');

+ 24 - 0
app/models/example.js

@@ -0,0 +1,24 @@
+export default {
+  namespace: 'example',
+
+  state: {},
+
+  subscriptions: {
+    setup({ dispatch, history }) {
+      // eslint-disable-line
+    },
+  },
+
+  effects: {
+    *fetch({ payload }, { call, put }) {
+      // eslint-disable-line
+      yield put({ type: 'save' });
+    },
+  },
+
+  reducers: {
+    save(state, action) {
+      return { ...state, ...action.payload };
+    },
+  },
+};

+ 10 - 0
app/models/title.js

@@ -0,0 +1,10 @@
+export default {
+    namespace: 'title',
+    state: '标题',
+    reducers: {
+      set(state, action) {
+        return action.title;
+      }
+    },
+  };
+  

+ 18 - 0
app/router.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Router, Route, Switch } from 'dva/router';
+import IndexPage from './routes/IndexPage';
+import Welcome from './components/welcome/welcome';
+import ChartDesigner from './components/chartDesigner/layout';
+
+function RouterConfig({ history }) {
+  return (
+    <Router history={history}>
+      <Switch>
+        <Route exact path='/' component={Welcome}/>
+        <Route path='/chartDesigner' component={ChartDesigner}/>
+      </Switch>
+    </Router>
+  );
+}
+
+export default RouterConfig;

+ 26 - 0
app/routes/IndexPage.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { connect } from 'dva';
+import styles from './IndexPage.css';
+
+function IndexPage() {
+  return (
+    <div className={styles.normal}>
+      <h1 className={styles.title}>Yay! Welcome to dva!</h1>
+      <div className='welcome' />
+      <ul className={styles.list}>
+        <li>
+          To get started, edit <code>src/index.js</code> and save to reload.
+        </li>
+        <li>
+          <a href="https://github.com/dvajs/dva-docs/blob/master/v1/en-us/getting-started.md">
+            Getting Started
+          </a>
+        </li>
+      </ul>
+    </div>
+  );
+}
+
+IndexPage.propTypes = {};
+
+export default connect()(IndexPage);

+ 26 - 0
app/routes/chartDesigner.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { connect } from 'dva';
+import styles from './IndexPage.less';
+
+function IndexPage() {
+  return (
+    <div className={styles.normal}>
+      <h1 className={styles.title}>Yay! Welcome to dva!</h1>
+      <div className={styles.welcome} />
+      <ul className={styles.list}>
+        <li>
+          To get started, edit <code>src/index.js</code> and save to reload.
+        </li>
+        <li>
+          <a href="https://github.com/dvajs/dva-docs/blob/master/v1/en-us/getting-started.md">
+            Getting Started
+          </a>
+        </li>
+      </ul>
+    </div>
+  );
+}
+
+IndexPage.propTypes = {};
+
+export default connect()(IndexPage);

+ 2 - 1
package.json

@@ -1,11 +1,12 @@
 {
   "private": true,
   "entry": {
-    "index": "./main.js"
+    "index": "./app/index.js"
   },
   "dependencies": {
     "antd": "^3.0.0",
     "app": "^0.1.0",
+    "dva": "^2.3.1",
     "echarts": "^4.1.0",
     "echarts-for-react": "^2.0.12-beta.0",
     "events": "^3.0.0",