couter更改

Author: introvert-y

.eslintignore

@@ -5,4 +5,5 @@ src/page/echartBox/index.js
 src/page/heightEchart/index.js
 src/page/chinaMap/index.js
 src/page/useCallBack/index.js
-src/serviceWorker.js
+src/serviceWorker.js
+# src/index.js

.eslintrc.js

@@ -11,7 +11,8 @@ module.exports = {
     "react/no-array-index-key": "off",
     "no-console": "off",
     "prettier/prettier": "error",
-    "react/jsx-one-expression-per-line": "off"
+    "react/jsx-one-expression-per-line": "off",
+    "no-unused-vars": "off"
   },
   env: {
     browser: true

src/index.js

@@ -3,49 +3,27 @@ import ReactDOM from "react-dom";
 import "./index.css";
 
 import { createStore, applyMiddleware } from "redux";
-// import { createLogger } from 'redux-logger';
+import { createLogger } from "redux-logger";
 import { Provider } from "react-redux";
 
 import reducer from "./page/reducer/index";
-import req from "./req/index";
 import AppRouter from "./router/index";
-// import thunkMiddleware from 'redux-thunk'
+import thunkMiddleware from "./thunkMiddleware";
 import * as serviceWorker from "./serviceWorker";
 
 /**
  * 官方自带的操作显示工具
  */
-// const loggerMiddleware = createLogger();
+const loggerMiddleware = createLogger();
 
-const logger = store => next => action => {
-  console.log("dispatching", action);
-  const result = next(action);
-  console.log("next state", store.getState());
-  return result;
-};
+// const logger = store => next => action => {
+//   console.log("dispatching", action);
+//   const result = next(action);
+//   console.log("next state", store.getState());
+//   return result;
+// };
 
-const thunkMiddleware = store => next => action => {
-  console.log("拦截了");
-  if (action.type === "changeMessageCount") {
-    console.log("符合条件");
-    setTimeout(() => {
-      req.user
-        .getMyInfo()
-        .then(res => {
-          if (res.code !== 0) {
-            req.err.show(res);
-            return;
-          }
-          console.log("timerMiddleware", res.data);
-          store.dispatch({ type: "receiveCount", phone: res.data.mobile });
-        })
-        .catch(req.err.show);
-    }, 2000);
-  }
-  next(action);
-};
-
-const store = createStore(reducer, applyMiddleware(thunkMiddleware, logger));
+const store = createStore(reducer, applyMiddleware(thunkMiddleware, loggerMiddleware));
 
 ReactDOM.render(
   <Provider store={store}>

src/page/Counter/index.js

@@ -15,29 +15,35 @@ const mapDispatchToProps = {
     type: "decrease",
     count: 10
   }),
-  changeMessageCount: () => ({
-    type: "changeMessageCount"
+  changeName: () => ({
+    type: "changeName"
   })
 };
 
-function Page({ value, onIncreaseClick, onDecreaseClick }) {
+function Page({ onIncreaseClick, onDecreaseClick, changeName }) {
   return (
     <div style={{ marginLeft: 50 }}>
-      <h1>{value}</h1>
+      {/* <h1>{value}</h1> */}
+      <p>
+        react-redux的异步流实现，是通过拦截派发给reducer的事件实现的，例如派发了一个改变全局状态中name的变化，同时循环执行其他操作
+      </p>
       <button type="button" onClick={onIncreaseClick}>
         +
       </button>
       <button type="button" style={{ marginLeft: 50 }} onClick={onDecreaseClick}>
         -
       </button>
+      <button type="button" style={{ marginLeft: 50 }} onClick={changeName}>
+        异步流改变全局状态中的名字，延迟5秒
+      </button>
     </div>
   );
 }
 
 Page.propTypes = {
-  value: PropTypes.number.isRequired,
   onIncreaseClick: PropTypes.func.isRequired,
-  onDecreaseClick: PropTypes.func.isRequired
+  onDecreaseClick: PropTypes.func.isRequired,
+  changeName: PropTypes.func.isRequired
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Page);

src/page/reducer/index.js

@@ -9,10 +9,19 @@ function caculateNum(count = 0, action) {
   }
 }
 
-const reducer = (state = { count: 0, phone: "", name: "Ming" }, action) => ({
+function caculateName(name, action) {
+  switch (action.type) {
+    case "setName":
+      return action.name;
+    default:
+      return name;
+  }
+}
+
+const reducer = (state = { count: 0, name: "Ming" }, action) => ({
   ...state,
   count: caculateNum(state.count, action),
-  phone: action.phone
+  name: caculateName(state.name, action)
 });
 
 export default reducer;

src/router/index.js

@@ -2,6 +2,7 @@
 import React from "react";
 import { HashRouter, Route, Link, Switch } from "react-router-dom";
 // import { browserHistory, Router} from 'react-router';
+import { connect } from "react-redux";
 import { Modal, message } from "antd";
 import PropTypes from "prop-types";
 import Home from "../page/CssTest/index";
@@ -17,6 +18,10 @@ import HeightEchart from "../page/heightEchart/index";
 import FormBox from "../page/form/index";
 import PromiseTest from "../page/promise/index";
 
+const mapStateToProps = state => ({
+  value: state.count,
+  name: state.name
+});
 /**
  * 解决ant-design的路由跳转，modal和message组件不关闭问题
  */
@@ -185,35 +190,45 @@ function QueryChildren({ match }) {
   );
 }
 
-function App() {
+function App({ value, name }) {
   return (
     // basename 为路由前添加前缀
     // <BrowserRouter basename={'/douyu'}>
-    <HashRouter>
-      <div style={{ marginLeft: 40 }}>
-        <Header />
-        <Switch>
-          <Route exact path="/" component={Home} />
-          <Route path="/query" component={RouteQuery} />
-          <Route path="/link" component={RouteLink} />
-          <Route path="/params" component={RouteParams} />
-          <Route path="/queryChildren" component={QueryChildren} />
-          <Route path="/counter" component={Counter} />
-          <Route path="/optimize" component={Optimize} />
-          <Route path="/echart" component={EchartBox} />
-          <Route path="/map" component={ChinaMap} />
-          <Route path="/useMemo" component={UseMemo} />
-          <Route path="/useCallback" component={UseCallback} />
-          <Route path="/memo" component={Memo} />
-          <Route path="/heightEchart" component={HeightEchart} />
-          <Route path="/form" component={FormBox} />
-          <Route path="/testPromise" component={PromiseTest} />
-        </Switch>
+    <>
+      <div style={{ paddingLeft: 50, fontSize: 20 }}>
+        <span>全局状态显示：</span>
+        <span>{value}</span>
+        <span style={{ paddingLeft: 50 }}>{name}</span>
       </div>
-    </HashRouter>
+      <HashRouter>
+        <div style={{ marginLeft: 40 }}>
+          <Header />
+          <Switch>
+            <Route exact path="/" component={Home} />
+            <Route path="/query" component={RouteQuery} />
+            <Route path="/link" component={RouteLink} />
+            <Route path="/params" component={RouteParams} />
+            <Route path="/queryChildren" component={QueryChildren} />
+            <Route path="/counter" component={Counter} />
+            <Route path="/optimize" component={Optimize} />
+            <Route path="/echart" component={EchartBox} />
+            <Route path="/map" component={ChinaMap} />
+            <Route path="/useMemo" component={UseMemo} />
+            <Route path="/useCallback" component={UseCallback} />
+            <Route path="/memo" component={Memo} />
+            <Route path="/heightEchart" component={HeightEchart} />
+            <Route path="/form" component={FormBox} />
+            <Route path="/testPromise" component={PromiseTest} />
+          </Switch>
+        </div>
+      </HashRouter>
+    </>
   );
 }
-
+App.propTypes = {
+  name: PropTypes.string.isRequired,
+  value: PropTypes.number.isRequired
+};
 RouteParams.propTypes = {
   location: PropTypes.object.isRequired
 };
@@ -226,4 +241,4 @@ RouteQuery.propTypes = {
 QueryChildren.propTypes = {
   match: PropTypes.object.isRequired
 };
-export default App;
+export default connect(mapStateToProps)(App);

src/thunkMiddleware.js

@@ -0,0 +1,11 @@
+const thunkMiddleware = store => next => action => {
+  console.log("拦截了");
+  if (action.type === "changeName") {
+    setTimeout(() => {
+      store.dispatch({ type: "setName", name: "炎黄子孙" });
+    }, 5000);
+  }
+  next(action);
+};
+
+export default thunkMiddleware;