引入redux

package-lock.json

@@ -376,6 +376,16 @@
       "resolved": "https://registry.npm.taobao.org/@types/history/download/@types/history-4.7.8.tgz",
       "integrity": "sha1-STSDh5gwdXBf6PTgL7Z/farsSTQ="
     },
+    "@types/hoist-non-react-statics": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmmirror.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz",
+      "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "@types/node": {
       "version": "14.14.31",
       "resolved": "https://registry.npm.taobao.org/@types/node/download/@types/node-14.14.31.tgz?cache=0&sync_timestamp=1613757896289&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fnode%2Fdownload%2F%40types%2Fnode-14.14.31.tgz",
@@ -405,6 +415,29 @@
         "@types/react": "*"
       }
     },
+    "@types/react-redux": {
+      "version": "7.1.33",
+      "resolved": "https://registry.npmmirror.com/@types/react-redux/-/react-redux-7.1.33.tgz",
+      "integrity": "sha512-NF8m5AjWCkert+fosDsN3hAlHzpjSiXlVy9EgQEmLoBhaNXbmyeGs/aj5dQzKuF+/q+S7JQagorGDW8pJ28Hmg==",
+      "dev": true,
+      "requires": {
+        "@types/hoist-non-react-statics": "^3.3.0",
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0",
+        "redux": "^4.0.0"
+      },
+      "dependencies": {
+        "redux": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+          "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+          "dev": true,
+          "requires": {
+            "@babel/runtime": "^7.9.2"
+          }
+        }
+      }
+    },
     "@types/react-router": {
       "version": "5.1.11",
       "resolved": "https://registry.npm.taobao.org/@types/react-router/download/@types/react-router-5.1.11.tgz",
@@ -834,6 +867,14 @@
       "resolved": "https://registry.npm.taobao.org/insert-css/download/insert-css-2.0.0.tgz",
       "integrity": "sha1-610Ql7dUL0x56jBg067gfQU4gPQ="
     },
+    "invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmmirror.com/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "is-core-module": {
       "version": "2.2.0",
       "resolved": "https://registry.npm.taobao.org/is-core-module/download/is-core-module-2.2.0.tgz?cache=0&sync_timestamp=1606411622542&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fis-core-module%2Fdownload%2Fis-core-module-2.2.0.tgz",
@@ -1529,6 +1570,19 @@
       "resolved": "https://registry.npm.taobao.org/react-is/download/react-is-16.13.1.tgz",
       "integrity": "sha1-eJcppNw23imZ3BVt1sHZwYzqVqQ="
     },
+    "react-redux": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmmirror.com/react-redux/-/react-redux-7.1.3.tgz",
+      "integrity": "sha512-uI1wca+ECG9RoVkWQFF4jDMqmaw0/qnvaSvOoL/GA4dNxf6LoV8sUAcNDvE5NWKs4hFpn0t6wswNQnY3f7HT3w==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "hoist-non-react-statics": "^3.3.0",
+        "invariant": "^2.2.4",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.9.0"
+      }
+    },
     "react-refresh": {
       "version": "0.9.0",
       "resolved": "https://registry.npm.taobao.org/react-refresh/download/react-refresh-0.9.0.tgz",
@@ -1649,6 +1703,11 @@
         }
       }
     },
+    "redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="
+    },
     "regenerator-runtime": {
       "version": "0.13.7",
       "resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.13.7.tgz",

package.json

@@ -17,8 +17,10 @@
     "pdfjs-dist": "^2.12.313",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
+    "react-redux": "^7.1.3",
     "react-router-dom": "^5.2.0",
     "react-vant": "^3.0.1",
+    "redux": "^5.0.1",
     "weixin-js-sdk-ts": "^1.6.0",
     "weui": "^1.1.0"
   },
@@ -26,6 +28,7 @@
     "@types/node": "^14.14.31",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@types/react-redux": "^7.1.33",
     "@vitejs/plugin-react-refresh": "^1.1.0",
     "less": "^4.1.1",
     "postcss-px-to-viewport": "^1.1.1",

src/main.tsx

@@ -3,10 +3,13 @@ import ReactDOM from 'react-dom'
 import './App.css'
 import 'antd/dist/antd.less'
 import { App } from './App'
-
+import { Provider } from 'react-redux'
+import store from './store'
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <Provider store={store}>
+      <App />
+    </Provider>
   </React.StrictMode>,
   document.getElementById('root')
 )

src/store/index.ts

@@ -0,0 +1,6 @@
+import { createStore } from 'redux'
+import  reducer  from './reducer'
+
+const store = createStore(reducer)
+export default store
+

src/store/reducer/index.ts

@@ -0,0 +1,23 @@
+const defaultState = {
+    count: 14,
+    list: ['1']
+}
+export default (state = defaultState, action: {
+    type: string,
+    paylod: any
+}) => {
+    switch (action.type) {
+
+        case 'SET_COUNT':
+            console.log(action.paylod)
+            state.count = action.paylod
+            return {
+                ...state,
+                count: action.paylod
+            }
+            break;
+
+
+    }
+    return state
+}

src/views/srt/index.tsx

@@ -2,8 +2,13 @@
 import './index.less'
 import React, { useEffect, useState } from "react";
 import axios from 'axios';
-
-export const Srt: React.FC = (props: any) => {
+import { connect } from 'react-redux'
+const mapStateToProps = state => {
+    return {
+        count: state.count
+    }
+}
+const srt: React.FC = (props: any) => {
     const [srt, setStr] = useState<string[][]>([])
     //解析时间
     const parseSrtTime = function (str: string): number {
@@ -13,6 +18,7 @@ export const Srt: React.FC = (props: any) => {
 
         return Number(str0) * 3600000 + Number(str1) * 60000 + Number(str2)
     }
+
     useEffect(() => {
         axios({
             url: './7月12日.srt',
@@ -32,16 +38,26 @@ export const Srt: React.FC = (props: any) => {
             }
             setStr(srtParseArr)
             console.log(srtParseArr)
+            console.log(props)
 
         })
         axios({
-            url:"https://jsjp-admin.zzxcx.net/jsjp-admin/open-api/gzpt/userInfo/configKey/jsjp_android",
-            method:'GET'
+            url: "https://jsjp-admin.zzxcx.net/jsjp-admin/open-api/gzpt/userInfo/configKey/jsjp_android",
+            method: 'GET'
         })
     }, [])
 
     return (
         <div className='srt'>
+            <div className='lyric'><span className='line'>全局count：{props.count}</span><button onClick={() => {
+                props.dispatch({
+                    type: 'SET_COUNT',
+                    paylod: (props.count + 1)
+                })
+            }
+
+
+            }>增加count</button></div>
             <div className='lyric'>
                 {
                     srt.map((item, index) => {
@@ -55,4 +71,5 @@ export const Srt: React.FC = (props: any) => {
         </div>
     )
 
-}
+}
+export const Srt = connect(mapStateToProps)(srt)