redux部分重构

package.json

@@ -28,6 +28,7 @@
 		"@dnd-kit/core": "^6.1.0",
 		"@dnd-kit/modifiers": "^7.0.0",
 		"@dnd-kit/sortable": "^8.0.0",
+		"@reduxjs/toolkit": "^1.9.7",
 		"antd": "^5.6.2",
 		"antd-img-crop": "^4.12.2",
 		"axios": "^0.27.2",
@@ -52,7 +53,6 @@
 		"react-redux": "^8.0.2",
 		"react-router-dom": "^6.3.0",
 		"react-transition-group": "^4.4.2",
-		"redux": "^4.2.0",
 		"redux-persist": "^6.0.0",
 		"redux-promise": "^0.6.0",
 		"redux-thunk": "^2.4.2",

src/App.tsx

@@ -1,16 +1,19 @@
-import { connect } from "react-redux";
+/* eslint-disable simple-import-sort/imports */
 import { HashRouter } from "react-router-dom";
 import { ConfigProvider } from "antd";
 import zhCN from "antd/lib/locale/zh_CN";
 
+import type { RootState } from "@/rtk";
+import { useAppSelector } from "@/hooks/useRTK";
 import useTheme from "@/hooks/useTheme";
 import Router from "@/routers/index";
 import AuthRouter from "@/routers/utils/authRouter";
 
 import "./index.scss";
 
-const App = (props: any) => {
-	const { assemblySize, themeConfig } = props;
+const App = () => {
+	const assemblySize = useAppSelector((state: RootState) => state.global.assemblySize);
+	const themeConfig = useAppSelector((state: RootState) => state.global.themeConfig);
 
 	// 全局使用主题
 	useTheme(themeConfig);
@@ -26,6 +29,4 @@ const App = (props: any) => {
 	);
 };
 
-const mapStateToProps = (state: any) => state.global;
-const mapDispatchToProps = {};
-export default connect(mapStateToProps, mapDispatchToProps)(App);
+export default App;

src/api/index.ts

@@ -1,3 +1,4 @@
+/* eslint-disable simple-import-sort/imports */
 import { message } from "antd";
 import axios, { AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios";
 
@@ -6,8 +7,7 @@ import { LOGIN_URL } from "@/config/config";
 import NProgress from "@/config/nprogress";
 import { showFullScreenLoading, tryHideFullScreenLoading } from "@/config/serviceLoading";
 import { ResultEnum } from "@/enums/httpEnum";
-import { store } from "@/redux";
-import { setToken } from "@/redux/modules/global/action";
+import { store, setToken } from "@/rtk";
 import { AxiosCanceler } from "./helper/axiosCancel";
 import { checkStatus } from "./helper/checkStatus";
 

src/components/SwitchDark/index.tsx

@@ -1,12 +1,17 @@
-import { connect } from "react-redux";
+/* eslint-disable simple-import-sort/imports */
 import { Switch } from "antd";
 
-import { setThemeConfig } from "@/redux/modules/global/action";
+import { useAppDispatch, useAppSelector } from "@/hooks/useRTK";
+import type { AppDispatch, RootState } from "@/rtk";
+import { setThemeConfig } from "@/rtk";
+
+const SwitchDark = () => {
+	const global = useAppSelector((state: RootState) => state.global);
+	const { themeConfig } = global;
+	const dispatch: AppDispatch = useAppDispatch();
 
-const SwitchDark = (props: any) => {
-	const { setThemeConfig, themeConfig } = props;
 	const onChange = (checked: boolean) => {
-		setThemeConfig({ ...themeConfig, isDark: checked });
+		dispatch(setThemeConfig({ ...themeConfig, isDark: checked }));
 	};
 
 	return (
@@ -20,6 +25,4 @@ const SwitchDark = (props: any) => {
 	);
 };
 
-const mapStateToProps = (state: any) => state.global;
-const mapDispatchToProps = { setThemeConfig };
-export default connect(mapStateToProps, mapDispatchToProps)(SwitchDark);
+export default SwitchDark;

src/hooks/useRTK.ts

@@ -0,0 +1,7 @@
+/* eslint-disable simple-import-sort/imports */
+import { useDispatch, useSelector, TypedUseSelectorHook } from "react-redux";
+
+import type { RootState, AppDispatch } from "@/rtk";
+
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

src/hooks/useTheme.ts

@@ -1,6 +1,6 @@
 import { ThemeConfigProp } from "@/redux/interface";
-import darkTheme from "@/styles/theme/theme-dark.less";
-import defaultTheme from "@/styles/theme/theme-default.less";
+import darkTheme from "@/styles/theme/theme-dark.less?inline";
+import defaultTheme from "@/styles/theme/theme-default.less?inline";
 
 /**
  * @description 全局主题设置

src/layouts/components/Footer/index.tsx

@@ -1,11 +1,12 @@
-import { connect } from "react-redux";
-
+import { useAppSelector } from "@/hooks/useRTK";
+import type { RootState } from "@/rtk";
 import { baseDomain } from "@/utils/util";
 
 import "./index.less";
 
-const LayoutFooter = (props: any) => {
-	const { themeConfig } = props;
+const LayoutFooter = () => {
+	const global = useAppSelector((state: RootState) => state.global);
+	const { themeConfig } = global;
 
 	// 定义一个自动获取年份的方法
 	const getYear = () => {
@@ -25,5 +26,4 @@ const LayoutFooter = (props: any) => {
 	);
 };
 
-const mapStateToProps = (state: any) => state.global;
-export default connect(mapStateToProps)(LayoutFooter);
+export default LayoutFooter;

src/layouts/components/Header/components/AssemblySize.tsx

@@ -1,14 +1,17 @@
-import { connect } from "react-redux";
 import { Dropdown, Menu } from "antd";
 
-import { setAssemblySize } from "@/redux/modules/global/action";
+import { useAppDispatch, useAppSelector } from "@/hooks/useRTK";
+import type { AppDispatch, RootState } from "@/rtk";
+import { setAssemblySize } from "@/rtk";
 
-const AssemblySize = (props: any) => {
-	const { assemblySize, setAssemblySize } = props;
+const AssemblySize = () => {
+	const global = useAppSelector((state: RootState) => state.global);
+	const { assemblySize } = global;
+	const dispatch: AppDispatch = useAppDispatch();
 
 	// 切换组件大小
 	const onClick = (e: MenuInfo) => {
-		setAssemblySize(e.key);
+		dispatch(setAssemblySize(e.key));
 	};
 
 	const menu = (
@@ -42,6 +45,4 @@ const AssemblySize = (props: any) => {
 	);
 };
 
-const mapStateToProps = (state: any) => state.global;
-const mapDispatchToProps = { setAssemblySize };
-export default connect(mapStateToProps, mapDispatchToProps)(AssemblySize);
+export default AssemblySize;

src/layouts/components/Header/components/AvatarIcon.tsx

@@ -1,21 +1,23 @@
 /* eslint-disable prettier/prettier */
 import { useRef } from "react";
-import { connect, useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { ExclamationCircleOutlined } from "@ant-design/icons";
 import { Avatar, Dropdown, MenuProps, message, Modal } from "antd";
 
 import { logoutApi } from "@/api/modules/login";
 import loginPng from "@/assets/images/logo_md.png";
 import { HOME_URL, LOGIN_URL } from "@/config/config";
-import { setToken, setUserInfo } from "@/redux/modules/global/action";
+import { useAppDispatch, useAppSelector } from "@/hooks/useRTK";
+import type { AppDispatch, RootState } from "@/rtk";
+import { setToken, setUserInfo } from "@/rtk";
 import InfoModal from "./InfoModal";
 import PasswordModal from "./PasswordModal";
 
-const AvatarIcon = (props: any) => {
-	const { userInfo, setToken, setUserInfo } = props;
+const AvatarIcon = () => {
+	const { userInfo } = useAppSelector((state: RootState) => state.global);
+	const dispatch: AppDispatch = useAppDispatch();
 	console.log("AvatarIcon setToken setUserInfo", setToken, setUserInfo);
-	console.log("AvatarIcon userInfo", userInfo );
+	console.log("AvatarIcon userInfo", userInfo);
 
 	const navigate = useNavigate();
 
@@ -39,8 +41,8 @@ const AvatarIcon = (props: any) => {
 				const { status, result } = await logoutApi();
 				if (status && status.code == 0 && result) {
 					// 退出，清除 token，清除用户信息，跳转到登录页
-					setToken("");
-					setUserInfo({});
+					dispatch(setToken(""));
+					dispatch(setUserInfo({}));
 					message.success("退出登录成功！");
 					navigate(LOGIN_URL);
 				} else {
@@ -59,12 +61,13 @@ const AvatarIcon = (props: any) => {
 		{
 			key: "2",
 			label: <span className="dropdown-item">个人信息</span>,
-			onClick: () => infoRef.current!.showModal({ 
-				photo: userInfo.photo,
-				profile: userInfo.profile,
-				role: userInfo.role,
-				userName: userInfo.userName,
-			})
+			onClick: () =>
+				infoRef.current!.showModal({
+					photo: userInfo.photo,
+					profile: userInfo.profile,
+					role: userInfo.role,
+					userName: userInfo.userName
+				})
 		},
 		{
 			key: "3",
@@ -91,5 +94,4 @@ const AvatarIcon = (props: any) => {
 	);
 };
 
-const mapDispatchToProps = { setToken, setUserInfo };
-export default connect(null, mapDispatchToProps)(AvatarIcon);
+export default AvatarIcon;

src/layouts/components/Header/components/BreadcrumbNav.tsx

@@ -1,13 +1,16 @@
-import { connect } from "react-redux";
 import { useLocation } from "react-router-dom";
 import { Breadcrumb } from "antd";
 
 import { HOME_URL } from "@/config/config";
+import { useAppSelector } from "@/hooks/useRTK";
+import type { RootState } from "@/rtk";
 
-const BreadcrumbNav = (props: any) => {
+const BreadcrumbNav = () => {
 	const { pathname } = useLocation();
-	const { themeConfig } = props.global;
-	const breadcrumbList = props.breadcrumb.breadcrumbList[pathname] || [];
+	const global = useAppSelector((state: RootState) => state.global);
+	const { themeConfig } = global;
+	const breadcrumb = useAppSelector((state: RootState) => state.breadcrumb);
+	const breadcrumbList = breadcrumb.breadcrumbList[pathname] || [];
 	console.log({ breadcrumbList });
 
 	return (
@@ -24,5 +27,4 @@ const BreadcrumbNav = (props: any) => {
 	);
 };
 
-const mapStateToProps = (state: any) => state;
-export default connect(mapStateToProps)(BreadcrumbNav);
+export default BreadcrumbNav;

src/layouts/components/Header/components/CollapseIcon.tsx

@@ -1,22 +1,23 @@
-import { connect } from "react-redux";
 import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
 
-import { updateCollapse } from "@/redux/modules/menu/action";
+import { useAppDispatch, useAppSelector } from "@/hooks/useRTK";
+import type { AppDispatch, RootState } from "@/rtk";
+import { updateCollapse } from "@/rtk";
 
-const CollapseIcon = (props: any) => {
-	const { isCollapse, updateCollapse } = props;
+const CollapseIcon = () => {
+	const menu = useAppSelector((state: RootState) => state.menu);
+	const { isCollapse } = menu;
+	const dispatch: AppDispatch = useAppDispatch();
 	return (
 		<div
 			className="collapsed"
 			onClick={() => {
-				updateCollapse(!isCollapse);
+				dispatch(updateCollapse(!isCollapse));
 			}}
 		>
 			{isCollapse ? <MenuUnfoldOutlined id="isCollapse" /> : <MenuFoldOutlined id="isCollapse" />}
 		</div>
 	);
 };
 
-const mapStateToProps = (state: any) => state.menu;
-const mapDispatchToProps = { updateCollapse };
-export default connect(mapStateToProps, mapDispatchToProps)(CollapseIcon);
+export default CollapseIcon;