引入redux

config/webpack.production.config.js

@@ -22,7 +22,7 @@ module.exports = {
         new webpack.DefinePlugin({
             "process.env.NODE_ENV": JSON.stringify("production")
         }),
-        new BundleAnalyzerPlugin()
+        // new BundleAnalyzerPlugin()
     ],
     optimization: {
         minimizer: [

package.json

@@ -30,6 +30,9 @@
     "@types/jest": "^24.0.17",
     "@types/react": "^16.9.1",
     "@types/react-dom": "^16.8.5",
+    "@types/react-redux": "^7.1.1",
+    "@types/redux-actions": "^2.3.1",
+    "@types/redux-logger": "^3.0.6",
     "@types/react-loadable": "^5.5.1",
     "@types/react-router-dom": "^5.1.3",
     "autoprefixer": "^9.6.1",
@@ -73,6 +76,12 @@
     "lodash": "^4.17.15",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
+    "react-redux": "^7.1.0",
+    "redux": "^4.0.1",
+    "redux-actions": "^2.6.5",
+    "redux-devtools-extension": "^2.13.8",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.2.0",
     "react-loadable": "^5.5.0",
     "react-router-dom": "^5.1.2",
     "simple-storage": "^4.0.2",

src/app.tsx

@@ -1,18 +1,23 @@
 import * as React from "react";
+import { Provider } from 'react-redux'
 import {HashRouter as Router, Route, Switch, Redirect} from "react-router-dom";
 
-import Login from "./pages/login";
+import Home from "./pages/home";
+import configureStore from "./redux/configureStore";
 
 const App = () => {
+    const store = configureStore();
     return (
-        <Router>
+        <Provider store={store}>
+            <Router>
             <Switch>
                 <Route exact path="/">
-                    <Redirect to="/login"></Redirect>
+                    <Redirect to="/home"></Redirect>
                 </Route>
-                <Route exact path="/login" component={Login}></Route>
+                <Route exact path="/home" component={Home}></Route>
             </Switch>
         </Router>
+        </Provider>
     )
 }
 

src/index.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import * as ReactDom from "react-dom";
 import App from "./app";
 
+
 ReactDom.render(
     <App />,
     document.getElementById("root") as HTMLElement

src/pages/home/index.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { connect } from "react-redux";
+import * as dataAPI from '../../api/dataAPI';
+import { IRootState } from "../../redux/states";
+import * as test from "../../redux/reducers/test"
+import { ADD_COUNT } from "../../redux/actionTypes";
+
+const Login = ({count, addCount}) => {
+
+    const testApi = () => {
+        dataAPI.getBlockNumber().then(res => {
+            console.log(res)
+        })
+    }
+
+    const add = () => {
+        addCount(1)
+        setTimeout(() => {
+            console.log('>>>',count)
+        }, 3000);
+    }
+
+    testApi()
+
+    return (
+        <div className="signFlowLoginPage">
+            <div>测试redux数据：{count}</div>
+            <button onClick={add}>+</button>
+            <button>-</button>
+            <button>15</button>
+        </div>
+    );
+}
+
+export default connect(
+    (state: IRootState) => {
+        return {
+            count: state.test.count
+        }
+    },
+    dispatch => ({
+        addCount: (num) => dispatch({type: ADD_COUNT, num} )
+    })
+)(Login);

src/redux/actionTypes.ts

@@ -0,0 +1,4 @@
+// test action type
+export const ADD_COUNT = "ADD_COUNT"
+export const SUB_COUNT = "SUB_COUNT"
+export const SET_COUNT = "SET_COUNT"

src/redux/configureStore.ts

@@ -0,0 +1,17 @@
+import { createStore, applyMiddleware } from "redux"
+import thunkMiddleware from 'redux-thunk'
+import { createLogger } from 'redux-logger'
+import reducers from "./reducers"
+
+const loggerMiddleware: any = createLogger()
+
+let middlewares = [thunkMiddleware]
+
+if (process.env.NODE_ENV == 'development') {
+    middlewares.push(loggerMiddleware)
+}
+let composeEnhancers = applyMiddleware(...middlewares)
+
+export default function configureStore(initialState?: any) {
+    return composeEnhancers(createStore)(reducers, initialState)
+}

src/redux/reducers.ts

@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux'
+import test from "./reducers/test";
+
+const reducers = combineReducers({
+    test
+})
+
+export default reducers;