redux模块化

src/store/actionTypes/index.ts

@@ -0,0 +1,3 @@
+export const CHANGE_COUNT = 'CHANGE_COUNT';
+export const CHANGE_NAME = 'CHANGE_NAME';
+export const CHANGE_PHONE = 'CHANGE_PHONE';

src/store/reducer/count.ts

@@ -0,0 +1,24 @@
+import * as actionTypes from './../actionTypes/index'
+const defaultState = {
+    count: 14,
+    list: ['1']
+}
+export default (state = defaultState, action: {
+    type: string,
+    paylod: any
+}) => {
+    switch (action.type) {
+
+        case actionTypes.CHANGE_COUNT:
+            console.log(action.paylod)
+    
+            return {
+                ...state,
+                count: action.paylod
+            }
+            break;
+
+
+    }
+    return state
+}

src/store/reducer/index.ts

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

src/store/reducer/user.ts

@@ -0,0 +1,31 @@
+import * as actionTypes from './../actionTypes/index'
+const defaultState = {
+    name: 'hello',
+    phone: 13012345678
+}
+export default (state = defaultState, action: {
+    type: string,
+    paylod: any
+}) => {
+    switch (action.type) {
+
+        case actionTypes.CHANGE_NAME:
+            console.log(action.paylod)
+            state.name = action.paylod
+            return {
+                ...state,
+                count: action.paylod
+            }
+            break;
+        case actionTypes.CHANGE_PHONE:
+            state.phone = action.paylod
+            return {
+                ...state,
+                phone:action.paylod
+            }
+            break;
+
+
+    }
+    return state
+}

src/views/marked/index.less

@@ -43,17 +43,15 @@
           padding-right: 50px;
           color: #fff;
           border-radius: 16px;
-      
           &::after {
+            
             content: "";
             width: 100%;
             height: 8px;
-            border-top: 2px dashed #06c05f ;
-            border-bottom: 2px solid #06c05f ;
             position: absolute;
             bottom: 0;
             left: 0;
-            transform: translateY(100%);
+            // transform: translateY(100%);
           }
         }
       

src/views/srt/index.tsx

@@ -3,12 +3,15 @@ import './index.less'
 import React, { useEffect, useState } from "react";
 import axios from 'axios';
 import { connect } from 'react-redux'
+import { Link } from 'react-router-dom';
+import * as actionTypes from './../../store/actionTypes/index'
 const mapStateToProps = state => {
     return {
-        count: state.count
+        count:state.count.count
     }
 }
 const srt: React.FC = (props: any) => {
+    console.log(props)
     const [srt, setStr] = useState<string[][]>([])
     //解析时间
     const parseSrtTime = function (str: string): number {
@@ -18,8 +21,9 @@ const srt: React.FC = (props: any) => {
 
         return Number(str0) * 3600000 + Number(str1) * 60000 + Number(str2)
     }
-
+    const countName = props.count+'个'
     useEffect(() => {
+        console.log(props)
         axios({
             url: './7月12日.srt',
             responseType: 'text'
@@ -45,19 +49,22 @@ const srt: React.FC = (props: any) => {
             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',
+                    type: actionTypes.CHANGE_COUNT,
                     paylod: (props.count + 1)
                 })
             }
 
 
             }>增加count</button></div>
+            <div>{countName}</div>
+            <Link to={'/wxcode'}>前往wxcode</Link>
             <div className='lyric'>
                 {
                     srt.map((item, index) => {

src/views/wxcode/index.tsx

@@ -1,7 +1,14 @@
 import { Button } from 'react-vant';
 import './index.less'
 import React, { useState } from "react";
-export const Wxcode: React.FC = (props: any) => {
+import { connect } from 'react-redux'
+
+const mapStateToProps = state => {
+    return {
+        count: state.count.count
+    }
+}
+ const wxcode: React.FC = (props: any) => {
     const query = new URLSearchParams(window.location.search)
     const [code] = useState(query.get("code") || "")
     const [state] = useState(query.get("state") || "")
@@ -30,7 +37,11 @@ export const Wxcode: React.FC = (props: any) => {
              
                 <div>state:{state}</div>
             </div>
+            <div className='col'>
+                <div>全局count：{props.count}</div>
+            </div>
         </div>
     )
 
-}
+}
+export const Wxcode = connect(mapStateToProps)(wxcode)