重新修改redux写法

package.json

@@ -8,6 +8,8 @@
     "@types/react-redux": "^6.0.3",
     "@types/react-router-dom": "^4.2.7",
     "@types/redux": "^3.6.0",
+    "@types/redux-logger": "^3.0.7",
+    "@types/redux-thunk": "^2.1.0",
     "autoprefixer": "7.1.6",
     "babel-jest": "^22.1.0",
     "babel-loader": "^7.1.2",
@@ -40,7 +42,9 @@
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "redux": "^4.0.0",
+    "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",
+    "redux-thunk": "^2.3.0",
     "resolve": "1.6.0",
     "source-map-loader": "^0.2.1",
     "style-loader": "0.19.0",

src/App.tsx

@@ -2,8 +2,8 @@ import * as React from 'react'
 import { Provider } from 'react-redux'
 import { PersistGate } from 'redux-persist/integration/react'
 import './App.css'
-import { AppContainer } from './redux'
 import { persistor, store } from './redux/store'
+import AppContainer from './views/Appcontainer'
 
 class App extends React.Component {
     public render(): JSX.Element {

src/component/showValue/index.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react'
-import { store } from '../../redux/store'
 
 interface IShowValueProps{
     handleChange: object
+    value: number | string
 }
 interface IShowValueState {
     handleChangeCB: any
@@ -18,9 +18,10 @@ export default class ShowValue extends React.Component<IShowValueProps, IShowVal
     }
     public render (): JSX.Element {
         const { handleChangeCB } = this.state
+        const { value } = this.props
         return (
             <div className="showValue">
-                <input type="text" className="showValue_input" value={store.getState().count} onChange={handleChangeCB}/>
+                <input type="text" className="showValue_input" value={value} onChange={handleChangeCB}/>
             </div>
         )
     }

src/redux/action/actionType.ts

@@ -0,0 +1,2 @@
+
+export const SAVECOUNT = 'SAVECOUNT'

src/redux/action/index.ts

@@ -0,0 +1,8 @@
+import * as actionType from './actionType'
+
+
+export function saveCount (value: string | number){
+    return (dispatch: any) => {
+        dispatch({ type: actionType.SAVECOUNT, payload: { count: value } })
+    }
+}

src/redux/action/index.tsx

@@ -1,17 +0,0 @@
-
-const ACTION = {
-    CHANGEVALUE: (obj:any) => {
-        return {
-            type: 'CHANGEVALUE',
-            value: obj.value
-        }
-    },
-    DECREASE: {
-        type: 'DECREASE'
-    },
-    INCREASE: {
-        type: 'INCREASE'
-    }
-}
-
-export default ACTION

src/redux/index.tsx

@@ -1,29 +1,29 @@
-import { connect } from 'react-redux'
-import appContainer from '../views/Appcontainer'
-import ACTION from './action'
+// import { connect } from 'react-redux'
+// import appContainer from '../views/Appcontainer'
+// import ACTION from './action'
 
-function mapStateToProps(state: any) {
-    // 这里将会把 strore 中的initState映射到组件的props上
-    return {
-        count: state.count
-    }
-}
+// function mapStateToProps(state: any) {
+//     // 这里将会把 strore 中的initState映射到组件的props上
+//     return {
+//         count: state.count
+//     }
+// }
 
-function mapDispatchToProps(dispatch: (obj: any) => void) {
-    return {
-        // CHANGEVALUE, DECREASE, INCREASE这些函数名会映射到被连接的组件props上
-        CHANGEVALUE: (obj:any) => {
-            // 当连接redux的组件调用props上的CHANGEVALUE方法时，此处将分发对应的Action，Action在redux/action/index.tsx中维护
-            // 找到reducers中相匹配的action，然后执行定义的方法
-            dispatch(ACTION.CHANGEVALUE(obj))
-        },
-        DECREASE: () => {
-            dispatch(ACTION.DECREASE)
-        },
-        INCREASE: () => {
-            dispatch(ACTION.INCREASE)
-        }
-    }
-}
-// 此处将连接好的组件导出
-export const AppContainer = connect(mapStateToProps, mapDispatchToProps)(appContainer)
+// function mapDispatchToProps(dispatch: (obj: any) => void) {
+//     return {
+//         // CHANGEVALUE, DECREASE, INCREASE这些函数名会映射到被连接的组件props上
+//         CHANGEVALUE: (obj:any) => {
+//             // 当连接redux的组件调用props上的CHANGEVALUE方法时，此处将分发对应的Action，Action在redux/action/index.tsx中维护
+//             // 找到reducers中相匹配的action，然后执行定义的方法
+//             dispatch(ACTION.CHANGEVALUE(obj))
+//         },
+//         DECREASE: () => {
+//             dispatch(ACTION.DECREASE)
+//         },
+//         INCREASE: () => {
+//             dispatch(ACTION.INCREASE)
+//         }
+//     }
+// }
+// // 此处将连接好的组件导出
+// export const AppContainer = connect(mapStateToProps, mapDispatchToProps)(appContainer)

src/redux/reducers/index.ts

@@ -0,0 +1,20 @@
+
+import * as actionType from '../action/actionType'
+
+interface IInitState {
+    count: number
+}
+const initState = {
+    count: 0,
+}
+export default function reducers (state: IInitState = initState , action: any) {
+    switch (action.type) {
+        case actionType.SAVECOUNT:
+            return { 
+                ...state,
+                count: action.payload.count
+            }
+        default:
+            return { count: state.count }
+    }
+}

src/redux/reducers/index.tsx

@@ -1,24 +0,0 @@
-
-interface IInitState {
-    count: number
-}
-interface IActionType {
-    type: string,
-    value: string
-}
-
-export default function reducers (state: IInitState , action: IActionType) {
-    switch (action.type) {
-        case 'INCREASE':
-            return { count: ++state.count }
-            break
-        case 'DECREASE':
-            return { count: --state.count }
-            break
-        case 'CHANGEVALUE':
-            return {count: action.value}
-            break
-        default:
-            return { count: state.count }
-    }
-}

src/redux/store/index.tsx

@@ -1,18 +1,19 @@
-import { createStore } from 'redux'
+import { applyMiddleware, createStore } from 'redux'
+import { createLogger } from 'redux-logger'
 import * as persist from 'redux-persist'
-import storage from 'redux-persist/lib/storage'
 import reducer from '../reducers'
+import storage from 'redux-persist/lib/storage'
+
+import thunkMiddleware from 'redux-thunk'
 
+const loggerMiddleware = createLogger()
 const { persistStore, persistReducer } = persist
 
 const persistConfig = {
     key: 'root',
     storage,
-  }
-const initState = {
-    count: 0
 }
 const persistedReducer = persistReducer(persistConfig, reducer)
-export const store = createStore(persistedReducer, initState)
+export const store = createStore(persistedReducer, applyMiddleware(loggerMiddleware, thunkMiddleware))
 export const persistor  = persistStore(store)
 

src/routes/index.tsx

@@ -2,25 +2,25 @@ import * as React from 'react'
 import * as Loadable from 'react-loadable'
 
 interface IRoute {
-    component: Promise<React.ComponentClass<any> | React.StatelessComponent<any> | { default: React.ComponentType<any> }>,
+    component: any
     path: string
 }
 
 export const route:IRoute[] = [
     {
-        component: import('../views/Support'),
+        component: loadable({ loader: () => import('../views/Support') }),
         path: '/support'
     },
     {
-        component: import('../views/about'),
+        component: loadable({ loader: () => import('../views/About') }),
         path: '/about'
     },
     {
-        component: import('../views/services'),
+        component: loadable({ loader: () => import('../views/Services') }),
         path: '/services'
     },
     {
-        component: import('../views/ReduxTest'),
+        component: loadable({ loader: () => import('../views/ReduxTest') }),
         path: '/ReduxText'
     }
 ]
@@ -36,12 +36,12 @@ function Loading(props: any) {
         return <div>loading</div>
     }
 }
-
-export const loadable = (component: Promise<React.ComponentClass<any> | React.StatelessComponent<any> | { default: React.ComponentType<any> }>) => {
+ function loadable (opt: any) {
      return Loadable({
-        delay: 200,
-        loader: () => component,
+        delay: 300,
+        // loader: () => import('../views/ReduxTest'),
         loading: Loading,
-        timeout: 10000,
+        ...opt
     })
 }
+

src/views/Appcontainer/index.tsx

@@ -1,30 +1,20 @@
 
-import * as PropTypes from 'prop-types'
 import * as React from 'react'
-import { HashRouter as Router, Route } from 'react-router-dom'
+import { HashRouter as Router, Route, RouteComponentProps } from 'react-router-dom'
 import Nav from '../../component/nav'
-import { loadable, route } from '../../routes'
-import Home from '../home'
+import { route } from '../../routes'
+import Home from '../Home'
 
 interface IRouteItem {
-    component: Promise<React.ComponentClass<any> | React.StatelessComponent<any> | { default: React.ComponentType<any> }>,
+    component: React.ComponentType<RouteComponentProps<any>> | React.ComponentType<any>
     path: string
 }
 
 export default class Appcontainer extends React.Component<any, any>{
-    // childContextTypes属性，声明给子孙组件提供的属性
-     public static childContextTypes = {
-        store: PropTypes.object
-      }
+
     constructor (props:any) {
         super(props)
     }
-    // 这个方法给子组件设置context的值，值为当前组件的props
-    public getChildContext () {
-        return {
-            store: this.props
-        }
-    }
     public render ():JSX.Element {
         return (
             <Router>
@@ -34,7 +24,7 @@ export default class Appcontainer extends React.Component<any, any>{
                     {
                         route.map((item:IRouteItem, index:number) => {
                             return (
-                                <Route path={item.path} component={loadable(item.component)} key={index}/>
+                                <Route path={item.path} component={item.component} key={index}/>
                             )
                         })
                     }

src/views/ReduxTest/index.tsx

@@ -1,45 +1,35 @@
-import * as PropTypes from 'prop-types'
 import * as React from 'react'
+import { connect } from 'react-redux'
 import DecreaseBtn from '../../component/decreaseBtn'
 import IncreaseBtn from '../../component/increaseBtn'
 import NowValue from '../../component/showValue'
 import './index.less'
 
-export default class Counter extends React.Component<any, any> {
-    // 声明静态属性 contextTypes 才能访问顶层组件定义的context，属性名字也需要和父组件一样，否则访问不到值
-    public static contextTypes = {
-        store: PropTypes.object
+class Counter extends React.Component<any, any> {
+    public handleDecreaseCB = () => {
+        let { count } = this.props
+        this.props.saveCount({ count: --count })
     }
-    constructor (props:any) {
-        super(props)
-        this.handleDecreaseCB = this.handleDecreaseCB.bind(this)
-        this.handleIncreaseCB = this.handleIncreaseCB.bind(this)
-        this.handleChangeCB = this.handleChangeCB.bind(this)
+    public handleIncreaseCB = () => {
+        let { count } = this.props
+        this.props.saveCount({ count: ++count })
     }
-    public handleDecreaseCB () {
-        this.context.store.DECREASE()
-    }
-    public handleIncreaseCB () {
-        this.context.store.INCREASE()
-    }
-    public handleChangeCB (e: any) {
+    public handleChangeCB = (e: any) => {
         const val = e.target.value
         const reg = /^[0-9]*$/
         if (!reg.test(val)) {
             alert('只能输入数字')
             return
         }
-        this.context.store.CHANGEVALUE({
-            type: 'CHANGEVALUE',
-            value: val
-        })
+        this.props.saveCount({ count: val })
     }
     public render () {
+        const { count } = this.props
         return (
             <div className="container">
                 <div className="container_count">
                     <DecreaseBtn handleDecrease={this.handleDecreaseCB}/>
-                    <NowValue handleChange={this.handleChangeCB}/>
+                    <NowValue value={count} handleChange={this.handleChangeCB}/>
                     <IncreaseBtn handleIncrease={this.handleIncreaseCB}/>
                     {this.props.children}
                 </div>
@@ -47,3 +37,10 @@ export default class Counter extends React.Component<any, any> {
         )    
     }
 }
+
+export default connect(
+    (state: any) => ({ count: state.count }),
+    {
+        saveCount: (payload: any) => ({ type: 'SAVECOUNT', payload }),
+    }
+)(Counter)

tslint.json

@@ -7,6 +7,7 @@
     ]
   },
   "rules": {
-      "no-console":false
+      "no-console":false,
+      "ordered-imports": false
     }
 }

yarn.lock

@@ -74,6 +74,20 @@
   dependencies:
     csstype "^2.2.0"
 
+"@types/redux-logger@^3.0.7":
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/@types/redux-logger/-/redux-logger-3.0.7.tgz#163f6f6865c69c21d56f9356dc8d741718ec0db0"
+  integrity sha512-oV9qiCuowhVR/ehqUobWWkXJjohontbDGLV88Be/7T4bqMQ3kjXwkFNL7doIIqlbg3X2PC5WPziZ8/j/QHNQ4A==
+  dependencies:
+    redux "^3.6.0"
+
+"@types/redux-thunk@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@types/redux-thunk/-/redux-thunk-2.1.0.tgz#bc2b6e972961831afb82a9bf4f06726e351f9416"
+  integrity sha1-vCtulylhgxr7gqm/TwZybjUflBY=
+  dependencies:
+    redux-thunk "*"
+
 "@types/redux@^3.6.0":
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/@types/redux/-/redux-3.6.0.tgz#f1ebe1e5411518072e4fdfca5c76e16e74c1399a"
@@ -1975,6 +1989,11 @@ decode-uri-component@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
 
+deep-diff@^0.3.5:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/deep-diff/-/deep-diff-0.3.8.tgz#c01de63efb0eec9798801d40c7e0dae25b582c84"
+  integrity sha1-wB3mPvsO7JeYgB1Ax+Da4ltYLIQ=
+
 deep-equal@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
@@ -4316,6 +4335,11 @@ lodash-es@^4.17.5:
   version "4.17.10"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.10.tgz#62cd7104cdf5dd87f235a837f0ede0e8e5117e05"
 
+lodash-es@^4.2.1:
+  version "4.17.14"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.14.tgz#12a95a963cc5955683cee3b74e85458954f37ecc"
+  integrity sha512-7zchRrGa8UZXjD/4ivUWP1867jDkhzTG2c/uj739utSd7O/pFFdxspCemIFKEEjErbcqRzn8nKnGsi7mvTgRPA==
+
 lodash._reinterpolate@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
@@ -4377,6 +4401,11 @@ lodash.uniq@^4.5.0:
   version "4.17.10"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
 
+lodash@^4.2.1:
+  version "4.17.14"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.14.tgz#9ce487ae66c96254fe20b599f21b6816028078ba"
+  integrity sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw==
+
 loglevel@^1.4.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.1.tgz#e0fc95133b6ef276cdc8887cdaf24aa6f156f8fa"
@@ -5879,10 +5908,22 @@ reduce-function-call@^1.0.1:
   dependencies:
     balanced-match "^0.4.2"
 
+redux-logger@^3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/redux-logger/-/redux-logger-3.0.6.tgz#f7555966f3098f3c88604c449cf0baf5778274bf"
+  integrity sha1-91VZZvMJjzyIYExEnPC69XeCdL8=
+  dependencies:
+    deep-diff "^0.3.5"
+
 redux-persist@^5.10.0:
   version "5.10.0"
   resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-5.10.0.tgz#5d8d802c5571e55924efc1c3a9b23575283be62b"
 
+redux-thunk@*, redux-thunk@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
+  integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==
+
 redux@*, redux@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.0.tgz#aa698a92b729315d22b34a0553d7e6533555cc03"
@@ -5890,6 +5931,16 @@ redux@*, redux@^4.0.0:
     loose-envify "^1.1.0"
     symbol-observable "^1.2.0"
 
+redux@^3.6.0:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.2.tgz#06b73123215901d25d065be342eb026bc1c8537b"
+  integrity sha512-pNqnf9q1hI5HHZRBkj3bAngGZW/JMCmexDlOxw4XagXY2o1327nHH54LoTjiPJ0gizoqPDRqWyX/00g0hD6w+A==
+  dependencies:
+    lodash "^4.2.1"
+    lodash-es "^4.2.1"
+    loose-envify "^1.1.0"
+    symbol-observable "^1.0.3"
+
 regenerate@^1.2.1:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
@@ -6719,7 +6770,7 @@ sw-toolbox@^3.4.0:
     path-to-regexp "^1.0.1"
     serviceworker-cache-polyfill "^4.0.0"
 
-symbol-observable@^1.2.0:
+symbol-observable@^1.0.3, symbol-observable@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"