diff --git a/redux/redux-reactRedux/package-lock.json b/redux/redux-reactRedux/package-lock.json index a08d4dc39..1cf72054c 100644 --- a/redux/redux-reactRedux/package-lock.json +++ b/redux/redux-reactRedux/package-lock.json @@ -14,10 +14,11 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.3.0", "react-dom": "^18.3.0", - "react-redux": "^9.1.1", + "react-redux": "^8.0.2", "react-scripts": "5.0.1", - "redux": "^5.0.1", - "redux-thunk": "^3.1.0", + "redux": "^4.2.0", + "redux-devtools-extension": "^2.13.9", + "redux-thunk": "^2.4.1", "sass": "^1.75.0", "sass-loader": "^14.2.1", "web-vitals": "^2.1.4" @@ -3792,6 +3793,19 @@ } } }, + "node_modules/@reduxjs/toolkit/node_modules/redux": { + "version": "5.0.1", + "resolved": "https://registry.npmmirror.com/redux/-/redux-5.0.1.tgz", + "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==" + }, + "node_modules/@reduxjs/toolkit/node_modules/redux-thunk": { + "version": "3.1.0", + "resolved": "https://registry.npmmirror.com/redux-thunk/-/redux-thunk-3.1.0.tgz", + "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==", + "peerDependencies": { + "redux": "^5.0.0" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "http://218.61.196.156:11694/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -4378,6 +4392,15 @@ "@types/node": "*" } }, + "node_modules/@types/hoist-non-react-statics": { + "version": "3.3.5", + "resolved": "https://registry.npmmirror.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz", + "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==", + "dependencies": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "node_modules/@types/html-minifier-terser": { "version": "6.1.0", "resolved": "http://218.61.196.156:11694/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -9243,6 +9266,19 @@ "he": "bin/he" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmmirror.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, + "node_modules/hoist-non-react-statics/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/hoopy": { "version": "0.1.4", "resolved": "http://218.61.196.156:11694/hoopy/-/hoopy-0.1.4.tgz", @@ -15632,23 +15668,35 @@ "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==" }, "node_modules/react-redux": { - "version": "9.1.1", - "resolved": "http://218.61.196.156:11694/react-redux/-/react-redux-9.1.1.tgz", - "integrity": "sha512-5ynfGDzxxsoV73+4czQM56qF43vsmgJsO22rmAvU5tZT2z5Xow/A2uhhxwXuGTxgdReF3zcp7A80gma2onRs1A==", + "version": "8.1.3", + "resolved": "https://registry.npmmirror.com/react-redux/-/react-redux-8.1.3.tgz", + "integrity": "sha512-n0ZrutD7DaX/j9VscF+uTALI3oUPa/pO4Z3soOBIjuRn/FzVu6aehhysxZCLi6y7duMf52WNZGMl7CtuK5EnRw==", "dependencies": { + "@babel/runtime": "^7.12.1", + "@types/hoist-non-react-statics": "^3.3.1", "@types/use-sync-external-store": "^0.0.3", + "hoist-non-react-statics": "^3.3.2", + "react-is": "^18.0.0", "use-sync-external-store": "^1.0.0" }, "peerDependencies": { - "@types/react": "^18.2.25", - "react": "^18.0", - "react-native": ">=0.69", - "redux": "^5.0.0" + "@types/react": "^16.8 || ^17.0 || ^18.0", + "@types/react-dom": "^16.8 || ^17.0 || ^18.0", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0", + "react-native": ">=0.59", + "redux": "^4 || ^5.0.0-beta.0" }, "peerDependenciesMeta": { "@types/react": { "optional": true }, + "@types/react-dom": { + "optional": true + }, + "react-dom": { + "optional": true + }, "react-native": { "optional": true }, @@ -15826,16 +15874,28 @@ } }, "node_modules/redux": { - "version": "5.0.1", - "resolved": "http://218.61.196.156:11694/redux/-/redux-5.0.1.tgz", - "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==" + "version": "4.2.1", + "resolved": "https://registry.npmmirror.com/redux/-/redux-4.2.1.tgz", + "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==", + "dependencies": { + "@babel/runtime": "^7.9.2" + } + }, + "node_modules/redux-devtools-extension": { + "version": "2.13.9", + "resolved": "https://registry.npmmirror.com/redux-devtools-extension/-/redux-devtools-extension-2.13.9.tgz", + "integrity": "sha512-cNJ8Q/EtjhQaZ71c8I9+BPySIBVEKssbPpskBfsXqb8HJ002A3KRVHfeRzwRo6mGPqsm7XuHTqNSNeS1Khig0A==", + "deprecated": "Package moved to @redux-devtools/extension.", + "peerDependencies": { + "redux": "^3.1.0 || ^4.0.0" + } }, "node_modules/redux-thunk": { - "version": "3.1.0", - "resolved": "http://218.61.196.156:11694/redux-thunk/-/redux-thunk-3.1.0.tgz", - "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==", + "version": "2.4.2", + "resolved": "https://registry.npmmirror.com/redux-thunk/-/redux-thunk-2.4.2.tgz", + "integrity": "sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==", "peerDependencies": { - "redux": "^5.0.0" + "redux": "^4" } }, "node_modules/reflect.getprototypeof": { diff --git a/redux/redux-reactRedux/package.json b/redux/redux-reactRedux/package.json index b95c2849e..76bd2def7 100644 --- a/redux/redux-reactRedux/package.json +++ b/redux/redux-reactRedux/package.json @@ -9,10 +9,11 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.3.0", "react-dom": "^18.3.0", - "react-redux": "^9.1.1", + "react-redux": "^8.0.2", "react-scripts": "5.0.1", - "redux": "^5.0.1", - "redux-thunk": "^3.1.0", + "redux": "^4.2.0", + "redux-devtools-extension": "^2.13.9", + "redux-thunk": "^2.4.1", "sass": "^1.75.0", "sass-loader": "^14.2.1", "web-vitals": "^2.1.4" diff --git a/redux/redux-reactRedux/src/components/count/dist/style.module.css b/redux/redux-reactRedux/src/components/count/dist/style.module.css index fcbe1fc67..95d9313c5 100644 --- a/redux/redux-reactRedux/src/components/count/dist/style.module.css +++ b/redux/redux-reactRedux/src/components/count/dist/style.module.css @@ -3,13 +3,4 @@ margin-left: 20px; padding: 12px; border: 1px solid green; -} -.hehe .item { - display: flex; - justify-content: flex-start; - align-items: center; -} -.hehe .item .name { - font-weight: bold; - color: #333; } \ No newline at end of file diff --git a/redux/redux-reactRedux/src/components/count/style.module.css b/redux/redux-reactRedux/src/components/count/style.module.css new file mode 100644 index 000000000..c7b67ff69 --- /dev/null +++ b/redux/redux-reactRedux/src/components/count/style.module.css @@ -0,0 +1,6 @@ +.hehe { + margin-top: 20px; + margin-left: 20px; + padding: 12px; + border: 1px solid green; +} diff --git a/redux/redux-reactRedux/src/components/count/style.module.min.css b/redux/redux-reactRedux/src/components/count/style.module.min.css new file mode 100644 index 000000000..8ae71639b --- /dev/null +++ b/redux/redux-reactRedux/src/components/count/style.module.min.css @@ -0,0 +1 @@ +.hehe{margin-top:20px;margin-left:20px;padding:12px;border:1px solid green} diff --git a/redux/redux-reactRedux/src/components/count/style.module.scss b/redux/redux-reactRedux/src/components/count/style.module.scss index e1bfd3a81..58ac08f21 100644 --- a/redux/redux-reactRedux/src/components/count/style.module.scss +++ b/redux/redux-reactRedux/src/components/count/style.module.scss @@ -3,14 +3,6 @@ margin-left: 20px; padding: 12px; border: 1px solid green; - .item{ - display: flex; - justify-content: flex-start; - align-items: center; - .name{ - font-weight: bold; - color: #333; - } - } + } \ No newline at end of file diff --git a/redux/redux-reactRedux/src/components/person/dist/style.module.css b/redux/redux-reactRedux/src/components/person/dist/style.module.css index a8a158838..a0e0ae73b 100644 --- a/redux/redux-reactRedux/src/components/person/dist/style.module.css +++ b/redux/redux-reactRedux/src/components/person/dist/style.module.css @@ -4,6 +4,15 @@ padding: 12px; border: 1px solid red; } +.hehe .item { + display: flex; + justify-content: flex-start; + align-items: center; +} +.hehe .item .name { + font-weight: bold; + color: #333; +} * { padding: 0; diff --git a/redux/redux-reactRedux/src/components/person/index.jsx b/redux/redux-reactRedux/src/components/person/index.jsx index 2995c165f..a4d56a4cf 100644 --- a/redux/redux-reactRedux/src/components/person/index.jsx +++ b/redux/redux-reactRedux/src/components/person/index.jsx @@ -7,7 +7,7 @@ import {useRef} from 'react' import {connect} from 'react-redux' import {nanoid} from 'nanoid' -import person from './style.module.css' +import person from './style.module.scss' import createPerson from '../../redux/action/person' function Person(props) { let nodeName=useRef() diff --git a/redux/redux-reactRedux/src/components/person/style.module.css b/redux/redux-reactRedux/src/components/person/style.module.css index cdfdd1a32..d47f1e370 100644 --- a/redux/redux-reactRedux/src/components/person/style.module.css +++ b/redux/redux-reactRedux/src/components/person/style.module.css @@ -4,18 +4,17 @@ padding: 12px; border: 1px solid red; } -.item{ + +.hehe .item { display: flex; justify-content: flex-start; align-items: center; } -.name{ + +.hehe .item .name { font-weight: bold; color: #333; } -.value{ - -} * { padding: 0; diff --git a/redux/redux-reactRedux/src/components/person/style.module.min.css b/redux/redux-reactRedux/src/components/person/style.module.min.css new file mode 100644 index 000000000..fe89351de --- /dev/null +++ b/redux/redux-reactRedux/src/components/person/style.module.min.css @@ -0,0 +1 @@ +.hehe{margin-top:20px;margin-left:20px;padding:12px;border:1px solid red}.hehe .item{display:flex;justify-content:flex-start;align-items:center}.hehe .item .name{font-weight:bold;color:#333}*{padding:0;margin:0;list-style:none} diff --git a/redux/redux-reactRedux/src/components/person/style.module.scss b/redux/redux-reactRedux/src/components/person/style.module.scss new file mode 100644 index 000000000..a93defaf6 --- /dev/null +++ b/redux/redux-reactRedux/src/components/person/style.module.scss @@ -0,0 +1,20 @@ +.hehe { + margin-top: 20px; + margin-left: 20px; + padding: 12px; + border: 1px solid red; + .item{ + display: flex; + justify-content: flex-start; + align-items: center; + .name{ + font-weight: bold; + color: #333; + } + } +} +* { + padding: 0; + margin: 0; + list-style: none; +} diff --git a/redux/redux-reactRedux/src/redux/dist/store.dev.js b/redux/redux-reactRedux/src/redux/dist/store.dev.js index 14662d65e..e7afaf2a3 100644 --- a/redux/redux-reactRedux/src/redux/dist/store.dev.js +++ b/redux/redux-reactRedux/src/redux/dist/store.dev.js @@ -7,11 +7,13 @@ exports["default"] = void 0; var _redux = require("redux"); +var _reduxDevtoolsExtension = require("redux-devtools-extension"); + var _count = _interopRequireDefault(require("./reducer/count")); var _person = _interopRequireDefault(require("./reducer/person")); -var _reduxThunk = require("redux-thunk"); +var _reduxThunk = _interopRequireDefault(require("redux-thunk")); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } @@ -25,6 +27,6 @@ var allReducer = (0, _redux.combineReducers)({ countReducer: _count["default"], personReducer: _person["default"] }); -var store = (0, _redux.createStore)(allReducer, (0, _redux.applyMiddleware)(_reduxThunk.thunk)); +var store = (0, _redux.createStore)(allReducer, (0, _reduxDevtoolsExtension.composeWithDevTools)((0, _redux.applyMiddleware)(_reduxThunk["default"]))); var _default = store; exports["default"] = _default; \ No newline at end of file diff --git a/redux/redux-reactRedux/src/redux/store.js b/redux/redux-reactRedux/src/redux/store.js index 69e899f8a..ab6cb4680 100644 --- a/redux/redux-reactRedux/src/redux/store.js +++ b/redux/redux-reactRedux/src/redux/store.js @@ -5,11 +5,12 @@ * @LastEditors: chenxuan */ import {createStore,applyMiddleware,combineReducers} from 'redux' +import {composeWithDevTools} from 'redux-devtools-extension' import countReducer from './reducer/count' import personReducer from './reducer/person' -import {thunk} from 'redux-thunk' +import thunk from 'redux-thunk' const allReducer=combineReducers({ countReducer,personReducer }) -const store=createStore(allReducer,applyMiddleware(thunk)) +const store=createStore(allReducer,composeWithDevTools(applyMiddleware(thunk))) export default store \ No newline at end of file