add hooks

Author: yongyue.huang

.eslintrc

@@ -0,0 +1,10 @@
+{
+  "parser": "babel-eslint",
+  "plugins": [
+    "react-hooks"
+  ],
+  "rules": {
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn"
+  }
+}

package-lock.json

@@ -8,6 +8,7 @@
     "serve": "serve -s build"
   },
   "dependencies": {
+    "acorn-dynamic-import": "^4.0.0",
     "antd": "^3.10.9",
     "axios": "^0.18.0",
     "chalk": "2.4.1",
@@ -26,9 +27,9 @@
     "progress-bar-webpack-plugin": "^1.11.0",
     "promise": "8.0.1",
     "raf": "3.4.1",
-    "react": "16.6.3",
+    "react": "^16.8.6",
     "react-dev-utils": "^5.0.1",
-    "react-dom": "16.6.3",
+    "react-dom": "^16.8.6",
     "react-fastclick": "^3.0.2",
     "react-infinite-scroller": "^1.2.2",
     "react-loadable": "^5.5.0",
@@ -39,6 +40,7 @@
     "redux-devtools-extension": "^2.13.7",
     "redux-immutable": "^4.0.0",
     "redux-localstorage": "^0.4.1",
+    "redux-react-hook": "^3.3.1",
     "redux-thunk": "2.3.0",
     "resolve": "1.8.1",
     "serve": "10.1.1",
@@ -58,6 +60,7 @@
     "@babel/preset-env": "^7.1.6",
     "@babel/preset-react": "^7.0.0",
     "@babel/runtime": "^7.1.5",
+    "acorn": "^6.0.5",
     "autoprefixer": "9.3.1",
     "babel-eslint": "^9.0.0",
     "babel-loader": "^8.0.4",
@@ -71,6 +74,7 @@
     "eslint-plugin-import": "2.14.0",
     "eslint-plugin-jsx-a11y": "5.0.1",
     "eslint-plugin-react": "7.11.1",
+    "eslint-plugin-react-hooks": "^1.6.0",
     "file-loader": "2.0.0",
     "less": "^3.8.1",
     "less-loader": "^4.1.0",
@@ -79,8 +83,8 @@
     "postcss-pxtorem": "^4.0.1",
     "style-loader": "0.23.1",
     "url-loader": "1.1.2",
-    "webpack": "4.26.1",
-    "webpack-dev-server": "3.1.10",
+    "webpack": "^4.28.4",
+    "webpack-dev-server": "^3.3.1",
     "webpack-manifest-plugin": "2.0.4"
   }
 }

package.json

@@ -1,51 +1,57 @@
-import React from 'react'
+import React, { useEffect, useContext, useCallback } from 'react'
+import { useDispatch, useMappedState, StoreContext } from 'redux-react-hook'
 import { Route, BrowserRouter as Router } from 'react-router-dom'
 import routes from 'routes'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
 import { setGlobalLoading } from 'actions/global'
 import Loading from 'components/Loading/Loading'
 
-@connect(
-    state => state.getIn(['global']),
-    dispatch => bindActionCreators({ setGlobalLoading }, dispatch)
-)
-class App extends React.Component {
-    componentDidMount () {
-        this.hiddenLoading()
-    }
-    componentDidUpdate () {
-        this.hiddenLoading()
-    }
-    hiddenLoading = () => {
-        const { globalLoading } = this.props
+export default function App() {
+    /*
+     * @description 从redux取值——方案1
+     * */
+    const store = useContext(StoreContext)
+    const { globalLoading } = store.getState().toJS().global
+    const dispatch = useDispatch()
+
+    /*
+     * @description 从redux取值——方案2
+     * */
+    // const mapState = useCallback(
+    //     state => ({
+    //         global: state.toJS().global
+    //     }),
+    //     [],
+    // );
+    // const { global } = useMappedState(mapState);
+
+    const hiddenLoading = () => {
         if (globalLoading) {
             setTimeout(() => {
-                this.props.setGlobalLoading(false)
+                dispatch(setGlobalLoading(false))
             }, 0)
         }
     }
-    render () {
-        const { globalLoading } = this.props
-        return (
-          <Router>
-              <div>
-                    {globalLoading && <Loading />}
-                  {
-                      routes.map((r, key) => {
-                          return (
-                              <Route
-                                  render={props => (<r.component {...props} routes={r.routes} />)}
-                                  exact={!!r.exact}
-                                  key={r.path + key}
-                                  path={r.path}
-                              />
-                          )
-                      })
-                  }
-              </div>
-          </Router>
-      )
-  }
+
+    useEffect(() => {
+        hiddenLoading()
+    }, [])
+    return (
+        <Router>
+            <div>
+                {globalLoading && <Loading/>}
+                {
+                    routes.map((r, key) => {
+                        return (
+                            <Route
+                                render={props => (<r.component {...props} routes={r.routes}/>)}
+                                exact={!!r.exact}
+                                key={r.path + key}
+                                path={r.path}
+                            />
+                        )
+                    })
+                }
+            </div>
+        </Router>
+    )
 }
-export default App