react-redux的异步流

Author: introvert-y

package.json

@@ -54,6 +54,8 @@
     "react-redux": "^7.1.1",
     "react-router": "^5.1.2",
     "redux": "^4.0.4",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.3.0",
     "reqwest": "^2.0.5",
     "resolve": "1.12.0",
     "resolve-url-loader": "3.1.0",

src/index.js

@@ -2,12 +2,48 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import AppRouter from './router/index.js';
+// import thunkMiddleware from 'redux-thunk'
 import * as serviceWorker from './serviceWorker';
-import { createStore } from 'redux';
+import { createStore, applyMiddleware } from 'redux';
+import { createLogger } from 'redux-logger'
+
 import reducer from './page/reducer/index';
 import { Provider } from 'react-redux';
+import req from './req/index.js'
+
+const loggerMiddleware = createLogger();
+
+const logger = store => next => action => {
+  console.log('dispatching', action)
+  let 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);
+const store = createStore(
+  reducer,
+  applyMiddleware(thunkMiddleware, logger)
+);
 
 ReactDOM.render(
   <Provider store={store}>

src/page/Counter/index.js

@@ -2,9 +2,10 @@ import { connect } from 'react-redux';
 import React from 'react';
 
 const mapStateToProps = (state) => {
-  console.log('state对象', state);
+  // console.log('state对象', state);
   return {
-    value: state.count
+    value: state.count,
+    phone: state.phone,
   }
 }
 
@@ -21,14 +22,21 @@ const mapDispatchToProps = {
       count: 10,
     }
   },
+  changeMessageCount: () => {
+    return {
+      type: 'changeMessageCount',
+    }
+  },
 }
 
-function Page({ value, onIncreaseClick, onDecreaseClick }) {
+function Page({ value, phone, onIncreaseClick, onDecreaseClick, changeMessageCount }) {
   return (
     <div style={{ marginLeft: 50 }}>
       <h1>{value}</h1>
       <button onClick={onIncreaseClick}>+</button>
       <button style={{ marginLeft: 50 }} onClick={onDecreaseClick}>-</button>
+      <button style={{ marginLeft: 50 }} onClick={changeMessageCount}>redux异步</button>
+      <h2 style={{ marginTop: 20 }}>{phone}</h2>
     </div>
   )
 }

src/page/promise/index.js

@@ -3,16 +3,15 @@ import { useEffect, useState } from 'react';
 import req from '../../req';
 
 function Page() {
-  const [infos, setInfos] = useState(null);
+  // const [infos, setInfos] = useState(null);
   function getCrtUserInfos() {
-    req.user.getMyAuthority()
+    req.user.getMyInfo()
       .then((res) => {
         if (res.code !== 0) {
           // req.err.show(res);
           return;
         }
-        setInfos(res.data);
-        console.log('getCrtUserInfos', infos);
+        console.log('getCrtUserInfos');
       })
       // .catch(req.err.show);
   }

src/page/reducer/index.js

@@ -1,8 +1,9 @@
-
-const reducer = (state = { count: 0, name: 'Ming' }, action) => {
+import req from '../../req';
+const reducer = (state = { count: 0, phone: '', name: 'Ming' }, action) => {
   return {
     ...state,
     count: caculateNum(state.count, action),
+    phone: action.phone,
   }
 };
 
@@ -16,4 +17,14 @@ function caculateNum( count = 0, action) {
       return count;
   }
 }
+function caculatePhone( phone = '', action) {
+  switch (action.type) {
+    case 'changeMessageCount':
+    case 'receiveCount':
+      return action.phone;
+    default:
+      return phone;
+  }
+}
+
 export default reducer;

src/req/api/transform.js

@@ -1,16 +1,16 @@
 import reqwest from 'reqwest';
 import { baseUrl } from '../config';
-import session from './session';
+// import session from './session';
 
 function wrapper(api) {
   console.log('api', api);
   return (data, originData = null) => {
-    const sessionId = session.get();
+    const sessionId = '114f273d90b04a5fbcd1df677ea6d010';
     const {
       method, headers = {},
     } = api;
     if (sessionId) {
-      headers.sessionId = '38d30a51aedb4e7d94f46df8c0cf4654';
+      headers.sessionId = sessionId;
     }
     let newData = null;
     let { url } = api;

src/req/api/user.js

@@ -1,6 +1,6 @@
 const api = {
   getMyInfo: {
-    url: '/eobi-api/api/sys/currentUserInfo',
+    url: '/bi-api/api/sys/currentUserInfo',
   },
 };
 

src/req/index.js

@@ -1,11 +1,11 @@
 import req from './req';
 import api from './api/index';
-// import err from './fn/err';
+import err from './fn/err';
 import cachify from './fn/cachify';
 import authority from './fn/authority';
 
 req.use(api);
-// req.use(err);
+req.use(err);
 req.use(cachify);
 req.use(authority);
 

src/router/index.js

@@ -49,7 +49,7 @@ function Header() {
         <Link to="/queryChildren">嵌套路由</Link>
       </li>
       <li>
-        <Link to="/counter">全局状态共享计数器操作</Link>
+        <Link to="/counter">react-redux的应用和异步流</Link>
       </li>
       <li>
         <Link to="/single">计数器显示</Link>