feat: 🐻 添加useSelector

src/components/antd-config-provider/index.tsx

@@ -2,15 +2,15 @@ import type { PropsWithChildren } from "react";
 import { legacyLogicalPropertiesTransformer, StyleProvider } from "@ant-design/cssinjs";
 import { ConfigProvider, theme as antdTheme } from "antd";
 import { useTheme } from "../theme-provider";
-import { useSettingsStore } from "@/stores/settings";
+import { useSelector, useSettingsStore } from "@/stores";
 
 import zhCN from "antd/locale/zh_CN";
 import "dayjs/locale/zh-cn";
 
 export function AntdConfigProvider({ children }: PropsWithChildren) {
   const { isDarkMode } = useTheme();
   const { defaultAlgorithm, darkAlgorithm } = antdTheme;
-  const colorPrimary = useSettingsStore((state) => state.colorPrimary);
+  const { colorPrimary } = useSettingsStore(useSelector(["colorPrimary"]));
   return (
     <StyleProvider hashPriority="high" transformers={[legacyLogicalPropertiesTransformer]}>
       <ConfigProvider

src/layouts/components/Sider.tsx

@@ -3,7 +3,7 @@ import { Link, useLocation } from "react-router-dom";
 import { BarChartOutlined, HomeOutlined, MenuOutlined, UserOutlined } from "@ant-design/icons";
 import { Layout, Menu, type MenuProps } from "antd";
 import { useTheme } from "@/components/theme-provider";
-import { useSettingsStore } from "@/stores/settings";
+import { useSelector, useSettingsStore } from "@/stores";
 
 import ReactIcon from "@/assets/svg/react.svg?react";
 
@@ -72,7 +72,7 @@ export default function Sider() {
   const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
   const [openKeys, setOpenKeys] = useState<string[]>([]);
 
-  const collapsed = useSettingsStore((state) => state.collapsed);
+  const { collapsed } = useSettingsStore(useSelector(["collapsed"]));
 
   const { isDarkMode } = useTheme();
 

src/layouts/components/custom-skin.tsx

@@ -1,9 +1,9 @@
 import { SkinOutlined } from "@ant-design/icons";
 import { ColorPicker } from "antd";
-import { setColorPrimary, useSettingsStore } from "@/stores/settings";
+import { setColorPrimary, useSelector, useSettingsStore } from "@/stores";
 
 export default function CustomSkin() {
-  const colorPrimary = useSettingsStore((state) => state.colorPrimary);
+  const { colorPrimary } = useSettingsStore(useSelector(["colorPrimary"]));
   return (
     <ColorPicker
       showText

src/layouts/index.tsx

@@ -6,10 +6,10 @@ import Content from "./components/content";
 import CustomSkin from "./components/custom-skin";
 import Sider from "./components/sider";
 import UserAvatar from "./components/user-avatar";
-import { setCollapsed, useSettingsStore } from "@/stores/settings";
+import { setCollapsed, useSelector, useSettingsStore } from "@/stores";
 
 export default function MainLayout() {
-  const collapsed = useSettingsStore((state) => state.collapsed);
+  const { collapsed } = useSettingsStore(useSelector(["collapsed"]));
 
   return (
     <Layout>

src/pages/landing/components/test-1.tsx

@@ -0,0 +1,12 @@
+import { Button } from "antd";
+import { useSelector, useTestStore } from "@/stores";
+
+export function Test1() {
+  const { a, addA } = useTestStore(useSelector(["a", "addA"]));
+  return (
+    <div className="flex flex-col gap-4 items-center justify-center border border-teal-400 w-[300px] h-[200px] rounded-sm">
+      <Button onClick={addA}>test-1: {a}</Button>
+      <p>{Math.random()}</p>
+    </div>
+  );
+}

src/pages/landing/components/test-2.tsx

@@ -0,0 +1,12 @@
+import { Button } from "antd";
+import { useSelector, useTestStore } from "@/stores";
+
+export function Test2() {
+  const { b, addB } = useTestStore(useSelector(["b", "addB"]));
+  return (
+    <div className="flex flex-col gap-4 items-center justify-center border border-teal-400 w-[300px] h-[200px] rounded-sm">
+      <Button onClick={addB}>test-2: {b}</Button>
+      <p>{Math.random()}</p>
+    </div>
+  );
+}

src/pages/landing/index.tsx

@@ -1,5 +1,7 @@
 import { Helmet } from "react-helmet-async";
 import { Button, DatePicker, Flex, Typography } from "antd";
+import { Test1 } from "./components/test-1";
+import { Test2 } from "./components/test-2";
 
 const { RangePicker } = DatePicker;
 
@@ -16,6 +18,10 @@ export default function LandingPage() {
           message
         </Button>
       </Flex>
+      <Flex gap={16}>
+        <Test1 />
+        <Test2 />
+      </Flex>
       <div className="h-screen" />
     </>
   );

src/pages/login/components/login-form.tsx

@@ -2,7 +2,6 @@ import { useNavigate } from "react-router-dom";
 import { LockOutlined, UserOutlined } from "@ant-design/icons";
 import { Button, Form, type FormProps, Input } from "antd";
 import { useLogin } from "../api";
-import { notification } from "@/utils";
 
 type FieldType = {
   username?: string;
@@ -19,7 +18,7 @@ export default function LoginForm() {
     onLogin(values);
     navigate("/landing");
     setTimeout(() => {
-      notification.success({
+      window.$notification?.success({
         message: "登录成功",
         description: "欢迎回来",
       });

src/stores/index.ts

@@ -0,0 +1,3 @@
+export * from "./selectors";
+export * from "./settings";
+export * from "./test";

src/stores/selectors.ts

@@ -0,0 +1,5 @@
+import { useShallow } from "zustand/shallow";
+import { pick } from "@/utils";
+
+export const useSelector = <T extends object, K extends keyof T>(fields: K[]) =>
+  useShallow((state: T) => pick(state, fields));

src/stores/settings.ts

@@ -1,6 +1,5 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
-import { useShallow } from "zustand/react/shallow";
 
 const initialState = {
   colorPrimary: "#1DA57A",
@@ -11,14 +10,6 @@ export const useSettingsStore = create<typeof initialState>()(
   persist(() => initialState, { name: "app-settings" }),
 );
 
-export const useShallowSettingsStore = () =>
-  useSettingsStore(
-    useShallow((state) => ({
-      colorPrimary: state.colorPrimary,
-      collapsed: state.collapsed,
-    })),
-  );
-
 export function setColorPrimary(colorPrimary: string) {
   useSettingsStore.setState({ colorPrimary });
 }

src/stores/test.ts

@@ -0,0 +1,17 @@
+import { create } from "zustand";
+
+type State = {
+  a: number;
+  addA: () => void;
+  b: number;
+  addB: () => void;
+};
+
+export const useTestStore = create<State>()((set) => {
+  return {
+    a: 1,
+    addA: () => set((state) => ({ a: state.a + 1 })),
+    b: 2,
+    addB: () => set((state) => ({ b: state.b + 1 })),
+  };
+});

src/utils/index.ts

@@ -2,4 +2,5 @@ export * from "./array";
 export * from "./date";
 export * from "./debounce-throttle";
 export * from "./is";
+export * from "./object";
 export * from "./tailwind";