路由和全局变量整理

package.json

@@ -22,7 +22,7 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "prt": "node prt.js"
+    "lint": "node prt.js"
   },
   "eslintConfig": {
     "extends": "react-app"

src/App.js

 import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import { Provider } from 'react-redux';
+import store from './store/index';
+
+import Router from './Router';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Provider store={store}>
+      <Router />
+    </Provider>
   );
 }
 

src/Main.js

@@ -2,11 +2,7 @@ import React from 'react';
 import './App.css';
 
 function App() {
-  return (
-    <div className="App-header">
-      友邦加保项目  预览版
-    </div>
-  );
+  return <div className="App-header">友邦加保项目 预览版</div>;
 }
 
 export default App;

src/Router.js

+import React from 'react';
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+
+import DoubleRecord from './pages/DoubleRecord';
+import InsuredInfo from './pages/InsuredInfo';
+
+export default function Routers() {
+  return (
+    <Router>
+      <Switch>
+        <Route exact path="/">
+          <InsuredInfo />
+        </Route>
+        <Route path="/doubleRecord">
+          <DoubleRecord />
+        </Route>
+      </Switch>
+    </Router>
+  );
+}

src/index.js

 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import Main from './Main';
+import App from './App';
 import * as serviceWorker from './serviceWorker';
 
-ReactDOM.render(<Main />, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

src/store/count.js

+// 这里可以看作 将原始redux中的action reducer都放入了同一个文件，
+// reducers和effects都可作为方法给组件调用，区别在于effects中可以写较为复杂逻辑和异步方法，reducers中为纯函数
+
+const count = {
+  state: 0,
+  reducers: {
+    add(state, payload) {
+      return state + payload;
+    },
+    double(state) {
+      return state * 2;
+    }
+  },
+  effects: {
+    async addAsync(payload, rootState) {
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      this.add(payload);
+    },
+    async doubleAsync(payload, rootState) {
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      this.double();
+    },
+    async addThenDoubleAsync(payload, rootState) {
+      await this.addAsync(payload);
+      await this.doubleAsync();
+    }
+  }
+};
+
+export default count;

src/store/index.js

+import { init } from '@rematch/core';
+import count from './count';
+
+const store = init({
+  models: {
+    count
+  }
+});
+
+export default store;

src/views/Count.js

+import React from 'react';
+import { connect } from 'react-redux';
+
+const Count = (props) => (
+  <div>
+    <div>the count is {props.count}</div>
+    <div>
+      <div>
+        <button onClick={props.add}>add</button>加一
+      </div>
+      <div>
+        <button onClick={props.double}>double</button>加倍
+      </div>
+      <div>
+        <button onClick={props.addAsync}>addAsync</button>一秒钟后加一
+      </div>
+      <div>
+        <button onClick={props.doubleAsync}>doubleAsync</button>一秒钟后加倍
+      </div>
+      <div>
+        <button onClick={props.addThenDoubleAsync}>addThenDoubleAsync</button>异步加一然后异步加倍
+        各一秒钟
+      </div>
+    </div>
+  </div>
+);
+
+const mapState = (state) => ({
+  count: state.count
+});
+const mapDispatch = ({ count: { add, double, addAsync, doubleAsync, addThenDoubleAsync } }) => ({
+  add: () => add(1),
+  double,
+  addAsync: () => addAsync(1),
+  doubleAsync,
+  addThenDoubleAsync: () => addThenDoubleAsync(1)
+});
+export default connect(mapState, mapDispatch)(Count);