From 6fef5d3be44abf31e7a176e8ea624fb057bda43c Mon Sep 17 00:00:00 2001 From: laptoy Date: Sun, 2 Jun 2024 19:10:19 +0800 Subject: [PATCH] =?UTF-8?q?redux=E6=8C=81=E4=B9=85=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 9 +++++++++ package.json | 1 + src/component/jjt/App.js | 14 ++++++++++++++ src/component/lwl/home.html | 11 +++++++++++ src/index.js | 27 +++++++++++++++------------ src/router/index.js | 2 +- src/store/Num.js | 14 ++++++++++++++ src/store/index.js | 20 ++++++++++++++++++++ 8 files changed, 85 insertions(+), 13 deletions(-) create mode 100644 src/component/jjt/App.js create mode 100644 src/component/lwl/home.html create mode 100644 src/store/Num.js create mode 100644 src/store/index.js diff --git a/package-lock.json b/package-lock.json index 9ce4dd9..6976a63 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,6 +24,7 @@ "react-router-dom": "^6.22.3", "react-scripts": "5.0.1", "react-vant": "^3.3.4", + "redux-persist": "^6.0.0", "sass": "^1.75.0", "web-vitals": "^2.1.4" } @@ -15595,6 +15596,14 @@ "resolved": "https://registry.npmmirror.com/redux/-/redux-5.0.1.tgz", "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==" }, + "node_modules/redux-persist": { + "version": "6.0.0", + "resolved": "https://registry.npmmirror.com/redux-persist/-/redux-persist-6.0.0.tgz", + "integrity": "sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==", + "peerDependencies": { + "redux": ">4.0.0" + } + }, "node_modules/redux-thunk": { "version": "3.1.0", "resolved": "https://registry.npmmirror.com/redux-thunk/-/redux-thunk-3.1.0.tgz", diff --git a/package.json b/package.json index e807853..e59dbc2 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "react-router-dom": "^6.22.3", "react-scripts": "5.0.1", "react-vant": "^3.3.4", + "redux-persist": "^6.0.0", "sass": "^1.75.0", "web-vitals": "^2.1.4" }, diff --git a/src/component/jjt/App.js b/src/component/jjt/App.js new file mode 100644 index 0000000..bbaead2 --- /dev/null +++ b/src/component/jjt/App.js @@ -0,0 +1,14 @@ +import React from 'react' +import { useSelector,useDispatch } from 'react-redux' +import { add } from '../../store/Num' +export default function App() { + let dispatch = useDispatch() + let tonum =()=>{ + dispatch(add(10)) + } + return ( +
+ +
+ ) +} diff --git a/src/component/lwl/home.html b/src/component/lwl/home.html new file mode 100644 index 0000000..33f29e0 --- /dev/null +++ b/src/component/lwl/home.html @@ -0,0 +1,11 @@ + + + + + + Document + + + 这是lwl的首页测试 + + \ No newline at end of file diff --git a/src/index.js b/src/index.js index 460a75e..130e65e 100644 --- a/src/index.js +++ b/src/index.js @@ -1,16 +1,19 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client';//用来加载虚拟dom -import './index.css'; -import '@nutui/nutui-react/dist/style.css' -import App from './App'; -import { RouterProvider } from 'react-router-dom'; -import router from './router'; -const root = ReactDOM.createRoot(document.getElementById('root')); +import React from "react"; +import ReactDOM from "react-dom/client"; //用来加载虚拟dom +import "@nutui/nutui-react/dist/style.css"; +import { RouterProvider } from "react-router-dom"; +import router from "./router"; +import "./index.css"; +import { Provider } from "react-redux"; +import { PersistGate } from "redux-persist/integration/react"; +import { persistor, store } from "./store"; +const root = ReactDOM.createRoot(document.getElementById("root")); root.render( - - + + + + + ); - - diff --git a/src/router/index.js b/src/router/index.js index 8c34d9e..2c78760 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,5 +1,5 @@ import { createBrowserRouter } from "react-router-dom"; -import App from "../App"; +import App from "../component/jjt/App"; // 路由配置 let router = createBrowserRouter([ { diff --git a/src/store/Num.js b/src/store/Num.js new file mode 100644 index 0000000..87fef08 --- /dev/null +++ b/src/store/Num.js @@ -0,0 +1,14 @@ +import { createSlice } from "@reduxjs/toolkit"; +let store = createSlice({ + name: "num", + initialState: { + num: 0 + }, + reducers: { + add(state,action) { + state.num = action.payload + } + } +}) +export const { add } = store.actions; +export default store; \ No newline at end of file diff --git a/src/store/index.js b/src/store/index.js new file mode 100644 index 0000000..5e0aca0 --- /dev/null +++ b/src/store/index.js @@ -0,0 +1,20 @@ +import {configureStore,combineReducers} from "@reduxjs/toolkit" +import {persistStore,persistReducer} from "redux-persist" +import storage from "redux-persist/lib/storage" +import Num from "./Num"; +const rootRedecer = combineReducers({ + num:Num.reducer, +}); +const persistConfig = { + key:'root', + storage, +} +const persistedReducer = persistReducer(persistConfig,rootRedecer); +export const store = configureStore({ + reducer:persistedReducer, + middleware:(getDefaultMiddleware)=> + getDefaultMiddleware({ + serializableCheck:false, + }), +}); +export const persistor = persistStore(store) \ No newline at end of file -- Gitee