refactor: ♻️ store 调用

jsxiaosi · Dec 1, 2022 · 166ba51 · 166ba51
1 parent d997cb6
commit 166ba51
Show file tree

Hide file tree

Showing 9 changed files with 190 additions and 74 deletions.
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
   "dependencies": {
     "@ant-design/icons": "^4.8.0",
     "@reduxjs/toolkit": "^1.9.0",
+    "ahooks": "^3.7.2",
     "antd": "^5.0.1",
     "dayjs": "^1.11.6",
     "localforage": "^1.10.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.tsx b/src/App.tsx
@@ -11,10 +11,10 @@ import { IntlProvider } from 'react-intl';
 import { useMemo } from 'react';
 import router from './router';
 import { localeConfig } from './locales';
-import { useAppSelector } from './store/hooks';
+import { useStoreApp } from './hooks/setting/useStoreApp';
 
 function App() {
-  const { locale } = useAppSelector((state) => state.app.appConfigMode);
+  const { locale } = useStoreApp();
 
   const getLocale = useMemo(() => {
     if (locale === 'en-US') {

diff --git a/src/components/Locale/index.tsx b/src/components/Locale/index.tsx
@@ -2,13 +2,11 @@ import type { MenuProps } from 'antd';
 import { Dropdown } from 'antd';
 import { memo, useMemo } from 'react';
 import SvgIcon from '../SvgIcon';
-import { useAppDispatch, useAppSelector } from '@/store/hooks';
-import { setAppConfigMode } from '@/store/modules/app';
 import type { LocaleType } from '@/locales';
+import { useStoreApp } from '@/hooks/setting/useStoreApp';
 
 const Locale = memo(() => {
-  const dispatch = useAppDispatch();
-  const { locale, ...appConfigMode } = useAppSelector((state) => state.app.appConfigMode);
+  const { locale, setAppConfig } = useStoreApp();
 
   const menuItems: MenuProps['items'] = useMemo(() => {
     return [
@@ -18,7 +16,7 @@ const Locale = memo(() => {
   }, [locale]);
 
   const menuClick: MenuProps['onClick'] = (info) => {
-    dispatch(setAppConfigMode({ ...appConfigMode, locale: info.key as LocaleType }));
+    setAppConfig({ locale: info.key as LocaleType });
   };
 
   return (

diff --git a/src/hooks/setting/useStoreApp.ts b/src/hooks/setting/useStoreApp.ts
@@ -0,0 +1,14 @@
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import type { AppConfigMode } from '@/store/modules/app';
+import { setAppConfigMode } from '@/store/modules/app';
+
+export const useStoreApp = () => {
+  const dispatch = useAppDispatch();
+  const appConfigMode = useAppSelector((state) => state.app.appConfigMode);
+
+  const setAppConfig = (app: Partial<AppConfigMode>) => {
+    dispatch(setAppConfigMode({ ...appConfigMode, ...app }));
+  };
+
+  return { ...appConfigMode, setAppConfig };
+};
diff --git a/src/layout/components/Navbart/index.tsx b/src/layout/components/Navbart/index.tsx
@@ -1,16 +1,13 @@
 import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
 import { Layout } from 'antd';
-import { setAppConfigMode } from '@/store/modules/app';
-
 import './index.less';
-import { useAppDispatch, useAppSelector } from '@/store/hooks';
 import Locale from '@/components/Locale';
+import { useStoreApp } from '@/hooks/setting/useStoreApp';
 
 const { Header } = Layout;
 
 const Navbart = () => {
-  const dispatch = useAppDispatch();
-  const { collapsed, ...appConfigMode } = useAppSelector((state) => state.app.appConfigMode);
+  const { collapsed, setAppConfig } = useStoreApp();
 
   const render = () => {
     return (
@@ -19,7 +16,7 @@ const Navbart = () => {
           <div className="layout-header-left">
             <div
               onClick={() => {
-                dispatch(setAppConfigMode({ ...appConfigMode, collapsed: !collapsed }));
+                setAppConfig({ collapsed: !collapsed });
               }}
             >
               {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}

diff --git a/src/layout/components/Sidebar/index.tsx b/src/layout/components/Sidebar/index.tsx
@@ -1,44 +1,24 @@
-import type { MenuProps } from 'antd';
-import { Layout, Menu, Image } from 'antd';
+import type { MenuProps, SiderProps } from 'antd';
+import { Drawer, Layout, Menu, Image } from 'antd';
 import { memo, useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
+import { useResponsive } from 'ahooks';
 import logo from '@/assets/logo.png';
 import routeList from '@/router/modules/index';
 import './index.less';
-import { useAppSelector } from '@/store/hooks';
-import { routeListToMenu } from '@/router/utils';
+import { getParentPaths, routeListToMenu } from '@/router/utils';
+import { useStoreApp } from '@/hooks/setting/useStoreApp';
 
 const { Sider } = Layout;
+
 const Sidebar = memo(() => {
   const { pathname } = useLocation();
-  const { collapsed } = useAppSelector((state) => state.app.appConfigMode);
+  const { collapsed, setAppConfig } = useStoreApp();
   const [menuList, _setMenuList] = useState(routeListToMenu(routeList));
   const [openKeys, setOpenKeys] = useState<string[]>([]);
+  const responsive = useResponsive();
   const navigate = useNavigate();
 
-  // 通过path获取父级路径
-  function getParentPaths(routePath: string, routes: any[]) {
-    // 深度遍历查找
-    function dfs(routes: any[], key: string, parents: string[]) {
-      for (let i = 0; i < routes.length; i++) {
-        const item = routes[i];
-        // 找到key则返回父级key
-        if (item.key === key) return [item.key];
-        // children不存在或为空则不递归
-        if (!item.children || !item.children.length) continue;
-        // 往下查找时将当前key入栈
-        parents.push(item.key);
-
-        if (dfs(item.children, key, parents).length) return parents;
-        // 深度遍历查找未找到时当前path 出栈
-        parents.pop();
-      }
-      // 未找到时返回空数组
-      return [];
-    }
-    return dfs(routes, routePath, []);
-  }
-
   useEffect(() => {
     if (!collapsed) {
       setOpenKeys(getParentPaths(pathname, menuList));
@@ -51,40 +31,60 @@ const Sidebar = memo(() => {
     setOpenKeys(keys);
   };
 
-  const render = () => {
-    return (
-      <Sider
-        className="sidebar"
-        breakpoint="lg"
-        collapsedWidth="55"
-        theme="light"
-        collapsed={collapsed}
-        onBreakpoint={(broken) => {
-          console.log(broken);
-        }}
-        onCollapse={(collapsed, type) => {
-          console.log(collapsed, type);
-        }}
-      >
-        <div className="app-logo">
-          <div className="logo">
-            <Image width={38} src={logo} preview={false} />
-          </div>
-          <div className="name">xiaosiAdmin</div>
-        </div>
-        <Menu
-          mode="inline"
-          openKeys={openKeys}
-          onOpenChange={onOpenChange}
-          selectedKeys={[pathname]}
-          items={menuList as MenuProps['items']}
-          onClick={(e) => navigate(e.key)}
-        />
-      </Sider>
-    );
+  const onBreakpoint: SiderProps['onBreakpoint'] = (broken) => {
+    let collapsedValue = collapsed;
+    if (broken) collapsedValue = true;
+    else collapsedValue = false;
+    setAppConfig({ collapsed: collapsedValue });
   };
 
-  return render();
+  const menuRender = (
+    <>
+      <div className="app-logo">
+        <div className="logo">
+          <Image width={38} src={logo} preview={false} />
+        </div>
+        <div className="name">xiaosiAdmin</div>
+      </div>
+      <Menu
+        mode="inline"
+        openKeys={openKeys}
+        onOpenChange={onOpenChange}
+        selectedKeys={[pathname]}
+        items={menuList as MenuProps['items']}
+        onClick={(e) => navigate(e.key)}
+      />
+    </>
+  );
+
+  return (
+    <>
+      {responsive.sm ? (
+        <Sider
+          className="sidebar"
+          breakpoint="lg"
+          collapsedWidth="55"
+          width={210}
+          theme="light"
+          collapsed={collapsed}
+          onBreakpoint={onBreakpoint}
+        >
+          {menuRender}
+        </Sider>
+      ) : (
+        <Drawer
+          width={210}
+          placement="left"
+          bodyStyle={{ padding: 0, height: '100%' }}
+          closable={false}
+          onClose={() => setAppConfig({ collapsed: !collapsed })}
+          open={!collapsed}
+        >
+          <div className="sidebar">{menuRender}</div>
+        </Drawer>
+      )}
+    </>
+  );
 });
 
 export default Sidebar;
diff --git a/src/router/utils.tsx b/src/router/utils.tsx
@@ -42,3 +42,26 @@ export function routeListToMenu(rtList: RouteList[], path?: React.Key): MenuItem
     return rtItem;
   });
 }
+
+// 通过path获取父级路径
+export function getParentPaths(routePath: string, routes: any[]) {
+  // 深度遍历查找
+  function dfs(routes: any[], key: string, parents: string[]) {
+    for (let i = 0; i < routes.length; i++) {
+      const item = routes[i];
+      // 找到key则返回父级key
+      if (item.key === key) return [item.key];
+      // children不存在或为空则不递归
+      if (!item.children || !item.children.length) continue;
+      // 往下查找时将当前key入栈
+      parents.push(item.key);
+
+      if (dfs(item.children, key, parents).length) return parents;
+      // 深度遍历查找未找到时当前path 出栈
+      parents.pop();
+    }
+    // 未找到时返回空数组
+    return [];
+  }
+  return dfs(routes, routePath, []);
+}