store

package.json

@@ -9,12 +9,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^1.9.3",
     "antd": "^5.3.2",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^8.0.5",
     "react-router-dom": "^6.9.0",
+    "redux": "^4.2.1",
     "sort-by": "^1.2.0",
     "web-vitals": "^3.3.0"
   },

src/main.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import { Provider } from "react-redux";
+import store from "./store";
 import reportWebVitals from "./reportWebVitals";
 import { BrowserRouter } from "react-router-dom";
 import { ConfigProvider } from "antd";
@@ -7,12 +9,9 @@ import zhCN from "antd/locale/zh_CN";
 import App from "./App";
 import "./index.scss"; //全局样式
 
-const root = ReactDOM.createRoot(
-  document.getElementById("root") as HTMLElement
-);
-
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
+    <Provider store={store}>
       <ConfigProvider
         locale={zhCN}
         theme={{ token: { colorPrimary: "#ff4d4f" } }}
@@ -21,6 +20,7 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
           <App />
         </BrowserRouter>
       </ConfigProvider>
+    </Provider>
   </React.StrictMode>
 );
 

src/pages/login/index.tsx

@@ -1,3 +1,36 @@
-export const LoginPage = ()=>{
+import { Button } from "antd";
-    return <>我是登录界面</>
+import { useDispatch, useSelector } from "react-redux";
-}
+import { loginAction, logoutAction } from "../../store/user/loginUserSlice";
+export const LoginPage = () => {
+  const dispatch = useDispatch();
+  const loginState = useSelector((state: any) => {
+    return state.loginUser.value;
+  });
+  return (
+    <>
+      <Button
+        onClick={() => {
+          dispatch(
+            loginAction({
+              user: {
+                name: "霸王",
+              },
+            })
+          );
+        }}
+      >
+        登录吧
+      </Button>
+
+      {loginState.isLogin && (
+        <Button
+          onClick={() => {
+            dispatch(logoutAction());
+          }}
+        >
+          {loginState.user.name}
+        </Button>
+      )}
+    </>
+  );
+};

src/store/index.ts

@@ -0,0 +1,10 @@
+import { configureStore } from "@reduxjs/toolkit";
+import loginUserReducer from "./user/loginUserSlice";
+
+const store = configureStore({
+  reducer: {
+    loginUser: loginUserReducer,
+  },
+});
+
+export default store;

src/store/user/loginUserSlice.ts

@@ -0,0 +1,33 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+type UserStoreInterface = {
+  user: any;
+  isLogin: boolean;
+};
+
+let defaultValue: UserStoreInterface = {
+  user: null,
+  isLogin: false,
+};
+
+const loginUserSlice = createSlice({
+  name: "loginUser",
+  initialState: {
+    value: defaultValue,
+  },
+  reducers: {
+    loginAction(stage, e) {
+      stage.value.user = e.payload.user;
+      stage.value.isLogin = true;
+    },
+    logoutAction(stage) {
+      stage.value.user = null;
+      stage.value.isLogin = false;
+    },
+  },
+});
+
+export default loginUserSlice.reducer;
+export const { loginAction, logoutAction } = loginUserSlice.actions;
+
+export type { UserStoreInterface };