From 6ec89345a8c29e889de7f4d04081445f366be11e Mon Sep 17 00:00:00 2001 From: NyanShen Date: Wed, 18 Jan 2023 14:36:13 +0800 Subject: [PATCH] =?UTF-8?q?=E5=BC=95=E5=85=A5redux?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config/webpack.production.config.js | 2 +- package-lock.json | 140 ++++++++++++++++++++++++++-- package.json | 9 ++ src/app.tsx | 13 ++- src/index.tsx | 1 + src/pages/home/index.tsx | 44 +++++++++ src/redux/actionTypes.ts | 4 + src/redux/configureStore.ts | 17 ++++ src/redux/reducers.ts | 8 ++ src/redux/reducers/test.ts | 36 +++++++ src/redux/states.ts | 5 + src/redux/states/test.ts | 3 + 12 files changed, 269 insertions(+), 13 deletions(-) create mode 100644 src/pages/home/index.tsx create mode 100644 src/redux/actionTypes.ts create mode 100644 src/redux/configureStore.ts create mode 100644 src/redux/reducers.ts create mode 100644 src/redux/reducers/test.ts create mode 100644 src/redux/states.ts create mode 100644 src/redux/states/test.ts diff --git a/config/webpack.production.config.js b/config/webpack.production.config.js index 5dfa1a1..5537e57 100644 --- a/config/webpack.production.config.js +++ b/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: [ diff --git a/package-lock.json b/package-lock.json index 8e40122..845962b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2111,6 +2111,15 @@ "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==", "dev": true }, + "@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "requires": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "@types/http-cache-semantics": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.1.tgz", @@ -2190,8 +2199,7 @@ "@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", - "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", - "dev": true + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" }, "@types/q": { "version": "1.5.5", @@ -2203,7 +2211,6 @@ "version": "16.14.34", "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.34.tgz", "integrity": "sha512-b99nWeGGReLh6aKBppghVqp93dFJtgtDOzc8NXM6hewD8PQ2zZG5kBLgbx+VJr7Q7WBMjHxaIl3dwpwwPIUgyA==", - "dev": true, "requires": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -2229,6 +2236,17 @@ "@types/webpack": "^4" } }, + "@types/react-redux": { + "version": "7.1.25", + "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.25.tgz", + "integrity": "sha512-bAGh4e+w5D8dajd6InASVIyCo4pZLJ66oLb80F9OBLO1gKESbZcRCJpTT6uLXX+HAB57zw1WTdwJdAsewuTweg==", + "requires": { + "@types/hoist-non-react-statics": "^3.3.0", + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0", + "redux": "^4.0.0" + } + }, "@types/react-router": { "version": "5.1.20", "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz", @@ -2250,6 +2268,21 @@ "@types/react-router": "*" } }, + "@types/redux-actions": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/@types/redux-actions/-/redux-actions-2.6.2.tgz", + "integrity": "sha512-TvcINy8rWFANcpc3EiEQX9Yv3owM3d3KIrqr2ryUIOhYIYzXA/bhDZeGSSSuai62iVR2qMZUgz9tQ5kr0Kl+Tg==", + "dev": true + }, + "@types/redux-logger": { + "version": "3.0.9", + "resolved": "https://registry.npmjs.org/@types/redux-logger/-/redux-logger-3.0.9.tgz", + "integrity": "sha512-cwYhVbYNgH01aepeMwhd0ABX6fhVB2rcQ9m80u8Fl50ZODhsZ8RhQArnLTkE7/Zrfq4Sz/taNoF7DQy9pCZSKg==", + "dev": true, + "requires": { + "redux": "^4.0.0" + } + }, "@types/responselike": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz", @@ -2262,8 +2295,7 @@ "@types/scheduler": { "version": "0.16.2", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", - "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", - "dev": true + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" }, "@types/secp256k1": { "version": "4.0.3", @@ -4992,8 +5024,7 @@ "csstype": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz", - "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==", - "dev": true + "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==" }, "cyclist": { "version": "1.0.1", @@ -5211,6 +5242,11 @@ } } }, + "deep-diff": { + "version": "0.3.8", + "resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-0.3.8.tgz", + "integrity": "sha512-yVn6RZmHiGnxRKR9sJb3iVV2XTF1Ghh2DiWRZ3dMnGc43yUdWWF/kX6lQyk3+P84iprfWKU/8zFTrlkvtFm1ug==" + }, "deep-equal": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz", @@ -7714,7 +7750,6 @@ "version": "2.2.4", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", - "dev": true, "requires": { "loose-envify": "^1.0.0" } @@ -8901,6 +8936,11 @@ "verror": "1.10.0" } }, + "just-curry-it": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/just-curry-it/-/just-curry-it-3.2.1.tgz", + "integrity": "sha512-Q8206k8pTY7krW32cdmPsP+DqqLgWx/hYPSj9/+7SYqSqz7UuwPbfSe07lQtvuuaVyiSJveXk0E5RydOuWwsEg==" + }, "keccak": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/keccak/-/keccak-3.0.3.tgz", @@ -11849,6 +11889,26 @@ "prop-types": "^15.5.0" } }, + "react-redux": { + "version": "7.2.9", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz", + "integrity": "sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==", + "requires": { + "@babel/runtime": "^7.15.4", + "@types/react-redux": "^7.1.20", + "hoist-non-react-statics": "^3.3.2", + "loose-envify": "^1.4.0", + "prop-types": "^15.7.2", + "react-is": "^17.0.2" + }, + "dependencies": { + "react-is": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" + } + } + }, "react-router": { "version": "5.3.4", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz", @@ -12000,6 +12060,49 @@ "strip-indent": "^3.0.0" } }, + "reduce-reducers": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/reduce-reducers/-/reduce-reducers-0.4.3.tgz", + "integrity": "sha512-+CNMnI8QhgVMtAt54uQs3kUxC3Sybpa7Y63HR14uGLgI9/QR5ggHvpxwhGGe3wmx5V91YwqQIblN9k5lspAmGw==" + }, + "redux": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz", + "integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==", + "requires": { + "@babel/runtime": "^7.9.2" + } + }, + "redux-actions": { + "version": "2.6.5", + "resolved": "https://registry.npmjs.org/redux-actions/-/redux-actions-2.6.5.tgz", + "integrity": "sha512-pFhEcWFTYNk7DhQgxMGnbsB1H2glqhQJRQrtPb96kD3hWiZRzXHwwmFPswg6V2MjraXRXWNmuP9P84tvdLAJmw==", + "requires": { + "invariant": "^2.2.4", + "just-curry-it": "^3.1.0", + "loose-envify": "^1.4.0", + "reduce-reducers": "^0.4.3", + "to-camel-case": "^1.0.0" + } + }, + "redux-devtools-extension": { + "version": "2.13.9", + "resolved": "https://registry.npmjs.org/redux-devtools-extension/-/redux-devtools-extension-2.13.9.tgz", + "integrity": "sha512-cNJ8Q/EtjhQaZ71c8I9+BPySIBVEKssbPpskBfsXqb8HJ002A3KRVHfeRzwRo6mGPqsm7XuHTqNSNeS1Khig0A==" + }, + "redux-logger": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/redux-logger/-/redux-logger-3.0.6.tgz", + "integrity": "sha512-JoCIok7bg/XpqA1JqCqXFypuqBbQzGQySrhFzewB7ThcnysTO30l4VCst86AuB9T9tuT03MAA56Jw2PNhRSNCg==", + "requires": { + "deep-diff": "^0.3.5" + } + }, + "redux-thunk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz", + "integrity": "sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==" + }, "reflect.ownkeys": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz", @@ -14101,12 +14204,25 @@ "integrity": "sha512-lx9B5iv7msuFYE3dytT+KE5tap+rNYw+K4jVkb9R/asAb+pbBSM17jtunHplhBe6RRJdZx3Pn2Jph24O32mOVg==", "dev": true }, + "to-camel-case": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/to-camel-case/-/to-camel-case-1.0.0.tgz", + "integrity": "sha512-nD8pQi5H34kyu1QDMFjzEIYqk0xa9Alt6ZfrdEMuHCFOfTLhDG5pgTu/aAM9Wt9lXILwlXmWP43b8sav0GNE8Q==", + "requires": { + "to-space-case": "^1.0.0" + } + }, "to-fast-properties": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==", "dev": true }, + "to-no-case": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/to-no-case/-/to-no-case-1.0.2.tgz", + "integrity": "sha512-Z3g735FxuZY8rodxV4gH7LxClE4H0hTIyHNIHdk+vpQxjLm0cwnKXq/OFVZ76SOQmto7txVcwSCwkU5kqp+FKg==" + }, "to-object-path": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz", @@ -14149,6 +14265,14 @@ "repeat-string": "^1.6.1" } }, + "to-space-case": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/to-space-case/-/to-space-case-1.0.0.tgz", + "integrity": "sha512-rLdvwXZ39VOn1IxGL3V6ZstoTbwLRckQmn/U8ZDLuWwIXNpuZDhQ3AiRUlhTbOXFVE9C+dR51wM0CBDhk31VcA==", + "requires": { + "to-no-case": "^1.0.0" + } + }, "toastr": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/toastr/-/toastr-2.1.4.tgz", diff --git a/package.json b/package.json index 89c388a..2919574 100644 --- a/package.json +++ b/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", diff --git a/src/app.tsx b/src/app.tsx index 7eebad5..5f5e90f 100644 --- a/src/app.tsx +++ b/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 ( - + + - + - + + ) } diff --git a/src/index.tsx b/src/index.tsx index 9fbd226..ba4c30c 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -2,6 +2,7 @@ import * as React from "react"; import * as ReactDom from "react-dom"; import App from "./app"; + ReactDom.render( , document.getElementById("root") as HTMLElement diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx new file mode 100644 index 0000000..27aa1b7 --- /dev/null +++ b/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 ( +
+
测试redux数据：{count}
+ + + +
+ ); +} + +export default connect( + (state: IRootState) => { + return { + count: state.test.count + } + }, + dispatch => ({ + addCount: (num) => dispatch({type: ADD_COUNT, num} ) + }) +)(Login); \ No newline at end of file diff --git a/src/redux/actionTypes.ts b/src/redux/actionTypes.ts new file mode 100644 index 0000000..a898435 --- /dev/null +++ b/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" \ No newline at end of file diff --git a/src/redux/configureStore.ts b/src/redux/configureStore.ts new file mode 100644 index 0000000..edffcae --- /dev/null +++ b/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) +} diff --git a/src/redux/reducers.ts b/src/redux/reducers.ts new file mode 100644 index 0000000..555e4ab --- /dev/null +++ b/src/redux/reducers.ts @@ -0,0 +1,8 @@ +import { combineReducers } from 'redux' +import test from "./reducers/test"; + +const reducers = combineReducers({ + test +}) + +export default reducers; \ No newline at end of file diff --git a/src/redux/reducers/test.ts b/src/redux/reducers/test.ts new file mode 100644 index 0000000..2ef2fc9 --- /dev/null +++ b/src/redux/reducers/test.ts @@ -0,0 +1,36 @@ +import * as constants from "../actionTypes" +import { ITest } from "../states/test"; + +const initialState: ITest = { + count: 0 +} + +interface ITestAction { + type: string + data: number +} + +export default function addCount( + state: ITest = initialState, + action: ITestAction +) { + switch (action.type) { + case constants.ADD_COUNT: + return { + ...state, + count: state.count + 1 + } + case constants.SUB_COUNT: + return { + ...state, + count: state.count - 1 + } + case constants.SET_COUNT: + return { + ...state, + count: action.data + } + default: + return state + } +} diff --git a/src/redux/states.ts b/src/redux/states.ts new file mode 100644 index 0000000..4f0d008 --- /dev/null +++ b/src/redux/states.ts @@ -0,0 +1,5 @@ +import { ITest } from "./states/test"; + +export interface IRootState { + test: ITest +} \ No newline at end of file diff --git a/src/redux/states/test.ts b/src/redux/states/test.ts new file mode 100644 index 0000000..f74fee4 --- /dev/null +++ b/src/redux/states/test.ts @@ -0,0 +1,3 @@ +export interface ITest { + count: number +} \ No newline at end of file