From fe10a1c37453b6815b567cce11ada36c46a376a5 Mon Sep 17 00:00:00 2001
From: Tristan Yang <yanggc888@163.com>
Date: Tue, 29 Aug 2023 11:33:23 +0800
Subject: [PATCH] refactor: useSelector

---
 package.json                                  |  2 +-
 src/components/AddEntriesMenu.tsx             |  5 +-
 src/components/AutoDeleteMessages.tsx         | 23 ++++---
 src/components/BlankPlaceholder.tsx           | 12 ++--
 src/components/Channel.tsx                    |  9 +--
 src/components/ChannelModal/index.tsx         |  6 +-
 src/components/FileBox/index.tsx              |  3 +-
 src/components/FileMessage/index.tsx          |  3 +-
 src/components/GuestOnly.tsx                  |  3 +-
 src/components/InviteModal/AddMembers.tsx     |  9 +--
 src/components/InviteModal/index.tsx          | 14 ++---
 src/components/ManageMembers/MemberList.tsx   | 11 ++--
 src/components/ManageMembers/index.tsx        |  9 +--
 src/components/Message/EditMessage.tsx        |  3 +-
 src/components/Message/Mention.tsx            |  3 +-
 src/components/Message/PreviewMessage.tsx     |  6 +-
 src/components/Message/Reaction.tsx           |  9 +--
 src/components/Message/ReactionPicker.tsx     |  9 +--
 src/components/Message/Reply.tsx              |  6 +-
 src/components/Message/URLPreview.tsx         |  4 +-
 src/components/Message/index.tsx              | 18 +++---
 .../Message/useMessageOperation.tsx           | 14 ++---
 src/components/Meta.tsx                       |  3 +-
 src/components/MixedInput/index.tsx           |  3 +-
 src/components/PinnedMessage.tsx              |  6 +-
 src/components/Profile/index.tsx              |  7 +--
 src/components/QRCode.tsx                     |  3 +-
 src/components/RequireAuth.tsx                | 18 +++---
 src/components/RequireNoAuth.tsx              |  3 +-
 src/components/SearchUser.tsx                 |  3 +-
 src/components/Send/Replying.tsx              |  6 +-
 src/components/Send/index.tsx                 | 26 ++++----
 src/components/Server.tsx                     | 10 +--
 src/components/ServerVersionChecker.tsx       |  3 +-
 src/components/StreamStatus.tsx               |  3 +-
 src/components/UnreadTabTip.tsx               | 42 +++++--------
 src/components/User/index.tsx                 | 11 ++--
 src/components/Version.tsx                    |  3 +-
 src/components/Voice/DMCalling.tsx            | 19 +++---
 src/components/Voice/Operations.tsx           |  6 +-
 src/components/Voice/index.tsx                | 16 ++---
 src/components/Voice/useVoice.ts              | 61 +++++++++++--------
 src/hooks/useDeleteMessage.ts                 | 11 ++--
 src/hooks/useDraft.ts                         |  9 +--
 src/hooks/useFavMessage.ts                    |  5 +-
 src/hooks/useFilteredChannels.ts              |  3 +-
 src/hooks/useFilteredUsers.ts                 | 14 ++---
 src/hooks/useInviteLink.ts                    |  3 +-
 src/hooks/useLeaveChannel.ts                  |  6 +-
 src/hooks/useLicense.ts                       | 11 ++--
 src/hooks/useNormalizeMessage.ts              |  3 +-
 src/hooks/usePinMessage.ts                    |  9 +--
 src/hooks/usePreload.ts                       | 36 +++++------
 src/hooks/useSendMessage.ts                   |  6 +-
 src/hooks/useStreaming/index.ts               | 11 ++--
 src/hooks/useUploadFile.ts                    | 15 +++--
 src/hooks/useUserOperation.ts                 | 18 +++---
 src/routes/chat/ChannelChat/index.tsx         | 15 ++---
 src/routes/chat/DMChat/index.tsx              |  7 +--
 src/routes/chat/GuestBlankPlaceholder.tsx     |  4 +-
 src/routes/chat/GuestChannelChat/index.tsx    |  7 +--
 src/routes/chat/GuestSessionList/Session.tsx  | 11 ++--
 src/routes/chat/GuestSessionList/index.tsx    | 18 +++---
 src/routes/chat/Layout/AddContactTip.tsx      | 12 ++--
 src/routes/chat/Layout/DMVoicing.tsx          | 21 +++----
 .../chat/Layout/NewMessageBottomTip.tsx       | 23 +++----
 src/routes/chat/Layout/Operations.tsx         |  3 +-
 .../VirtualMessageFeed/CustomHeader.tsx       | 11 ++--
 .../chat/Layout/VirtualMessageFeed/index.tsx  | 46 +++++++-------
 src/routes/chat/Layout/index.tsx              | 17 +++---
 src/routes/chat/RTCWidget.tsx                 | 15 ++---
 src/routes/chat/SessionList/ContextMenu.tsx   | 11 ++--
 src/routes/chat/SessionList/Session.tsx       | 45 ++++++--------
 src/routes/chat/SessionList/index.tsx         | 22 +++----
 src/routes/chat/VoiceChat/VoiceManagement.tsx | 12 ++--
 src/routes/chat/VoiceChat/index.tsx           | 23 +++----
 src/routes/chat/VoiceFullscreen.tsx           | 15 +++--
 src/routes/chat/index.tsx                     | 24 +++-----
 src/routes/chat/utils.tsx                     |  7 ++-
 src/routes/favs/index.tsx                     | 11 ++--
 src/routes/files/Filter/index.tsx             |  6 +-
 src/routes/files/index.tsx                    |  7 +--
 src/routes/guest.tsx                          |  4 +-
 src/routes/home/MobileNavs.tsx                | 16 ++---
 src/routes/home/User.tsx                      |  3 +-
 src/routes/home/index.tsx                     | 24 +++-----
 src/routes/index.tsx                          | 15 ++---
 src/routes/invitePrivate/index.tsx            |  3 +-
 src/routes/login/index.tsx                    |  3 +-
 src/routes/onboarding/steps/admin-account.tsx |  4 +-
 src/routes/reg/Register.tsx                   |  4 +-
 src/routes/resources/Filter/index.tsx         |  5 +-
 src/routes/resources/index.tsx                | 13 ++--
 src/routes/setting/APIDocument.tsx            |  3 +-
 src/routes/setting/BotConfig/index.tsx        |  6 +-
 .../DataManagement/AutoDeleteFiles.tsx        |  6 +-
 src/routes/setting/MyAccount.tsx              |  8 ++-
 src/routes/setting/Overview/ChatLayout.tsx    |  6 +-
 .../setting/Overview/ContactVerification.tsx  |  6 +-
 src/routes/setting/Overview/OnlineStatus.tsx  |  6 +-
 src/routes/setting/Overview/Server.tsx        |  9 ++-
 src/routes/setting/Overview/index.tsx         |  6 +-
 src/routes/setting/Overview/server.tsx        |  9 ++-
 src/routes/setting/Widget.tsx                 |  3 +-
 src/routes/setting/navs.tsx                   |  6 +-
 src/routes/settingChannel/Overview.tsx        |  9 +--
 src/routes/settingChannel/index.tsx           | 12 ++--
 src/routes/settingDM/index.tsx                | 11 +---
 src/routes/users/Search.tsx                   |  6 +-
 src/widget/Icon.tsx                           |  3 +-
 src/widget/Popup/Message/index.tsx            |  3 +-
 src/widget/Popup/MessageFeed.tsx              |  6 +-
 src/widget/Popup/Welcome.tsx                  |  3 +-
 src/widget/Popup/index.tsx                    |  5 +-
 src/widget/WidgetContext.tsx                  |  3 +-
 src/widget/useSSE.ts                          | 18 +++---
 116 files changed, 572 insertions(+), 661 deletions(-)

diff --git a/package.json b/package.json
index 2e002edc..78bcb1d7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vocechat-web",
-  "version": "0.4.23",
+  "version": "0.5.0",
   "homepage": "https://voce.chat",
   "dependencies": {
     "@electron-toolkit/preload": "^2.0.0",
diff --git a/src/components/AddEntriesMenu.tsx b/src/components/AddEntriesMenu.tsx
index 2f23b9f5..b3c14f6a 100644
--- a/src/components/AddEntriesMenu.tsx
+++ b/src/components/AddEntriesMenu.tsx
@@ -11,10 +11,11 @@ import ChannelModal from "./ChannelModal";
 import InviteModal from "./InviteModal";
 import SearchUser from "./SearchUser";
 import UsersModal from "./UsersModal";
+import { shallowEqual } from "react-redux";
 
 export default function AddEntriesMenu() {
   const { t } = useTranslation();
-  const currentUser = useAppSelector((store) => store.authData.user);
+  const isAdmin = useAppSelector((store) => store.authData.user?.is_admin, shallowEqual);
   const [isPrivate, setIsPrivate] = useState(false);
   const [inviteModalVisible, setInviteModalVisible] = useState(false);
   const [searchModalVisible, setSearchModalVisible] = useState(false);
@@ -60,7 +61,7 @@ export default function AddEntriesMenu() {
     <>
       <ul className="flex flex-col rounded-xl drop-shadow p-1 select-none text-gray-500 dark:text-gray-300 bg-white dark:bg-black">
         {/* temp remove public channel */}
-        {currentUser?.is_admin && (
+        {isAdmin && (
           <li className={itemClass} onClick={handleOpenChannelModal.bind(null, false)}>
             <ChannelIcon className={iconClass} />
             {t("action.new_channel")}
diff --git a/src/components/AutoDeleteMessages.tsx b/src/components/AutoDeleteMessages.tsx
index 9e0295c1..38689c2a 100644
--- a/src/components/AutoDeleteMessages.tsx
+++ b/src/components/AutoDeleteMessages.tsx
@@ -9,6 +9,7 @@ import { ChatContext } from "../types/common";
 import SaveTip from "./SaveTip";
 import StyledButton from "./styled/Button";
 import StyledRadio from "./styled/Radio";
+import { shallowEqual } from "react-redux";
 
 type Props = {
   id: number;
@@ -16,16 +17,18 @@ type Props = {
   // expires_in?: number
 };
 const AutoDeleteMessages = ({ id, type = "channel" }: Props) => {
-  const { setting, channel, loginUser } = useAppSelector((store) => {
-    return {
-      setting:
-        type == "channel"
-          ? store.footprint.autoDeleteMsgChannels.find((item) => item.gid == id)
-          : store.footprint.autoDeleteMsgUsers.find((item) => item.uid == id),
-      loginUser: store.authData.user,
-      channel: type == "channel" ? store.channels.byId[id] : null
-    };
-  });
+  const setting = useAppSelector(
+    (store) =>
+      type == "channel"
+        ? store.footprint.autoDeleteMsgChannels.find((item) => item.gid == id)
+        : store.footprint.autoDeleteMsgUsers.find((item) => item.uid == id),
+    shallowEqual
+  );
+  const loginUser = useAppSelector((store) => store.authData.user, shallowEqual);
+  const channel = useAppSelector(
+    (store) => (type == "channel" ? store.channels.byId[id] : null),
+    shallowEqual
+  );
   const [updateSetting, { isSuccess }] = useUpdateAutoDeleteMsgMutation();
   const [clearMessage, { isSuccess: clearSuccess }] = useLazyClearChannelMessageQuery();
 
diff --git a/src/components/BlankPlaceholder.tsx b/src/components/BlankPlaceholder.tsx
index 790592e7..e4cad348 100644
--- a/src/components/BlankPlaceholder.tsx
+++ b/src/components/BlankPlaceholder.tsx
@@ -12,6 +12,7 @@ import IconAsk from "@/assets/icons/placeholder.question.svg";
 import ChannelModal from "./ChannelModal";
 import InviteModal from "./InviteModal";
 import UsersModal from "./UsersModal";
+import { shallowEqual } from "react-redux";
 
 interface Props {
   type?: "chat" | "user";
@@ -23,13 +24,8 @@ const classes = {
 };
 const BlankPlaceholder: FC<Props> = ({ type = "chat" }) => {
   const { t } = useTranslation("welcome");
-  const { server, isAdmin, upgraded } = useAppSelector((store) => {
-    return {
-      server: store.server,
-      isAdmin: store.authData.user?.is_admin,
-      upgraded: store.server.upgraded
-    };
-  });
+  const server = useAppSelector((store) => store.server, shallowEqual);
+  const isAdmin = useAppSelector((store) => store.authData.user?.is_admin, shallowEqual);
   const [inviteModalVisible, setInviteModalVisible] = useState(false);
   const [createChannelVisible, setCreateChannelVisible] = useState(false);
   const [userListVisible, setUserListVisible] = useState(false);
@@ -93,7 +89,7 @@ const BlankPlaceholder: FC<Props> = ({ type = "chat" }) => {
             <IconChat className={classes.boxIcon} />
             <div className={classes.boxTip}>{chatTip}</div>
           </button>
-          {!upgraded && (
+          {!server.upgraded && (
             <>
               <a
                 href={"https://voce.chat#download"}
diff --git a/src/components/Channel.tsx b/src/components/Channel.tsx
index 10e8e94b..fef1cb13 100644
--- a/src/components/Channel.tsx
+++ b/src/components/Channel.tsx
@@ -3,6 +3,7 @@ import clsx from "clsx";
 
 import { useAppSelector } from "@/app/store";
 import Avatar from "./Avatar";
+import { shallowEqual } from "react-redux";
 
 interface Props {
   interactive?: boolean;
@@ -12,12 +13,8 @@ interface Props {
 }
 
 const Channel: FC<Props> = ({ interactive = true, id, compact = false, avatarSize = 32 }) => {
-  const { channel, totalMemberCount } = useAppSelector((store) => {
-    return {
-      channel: store.channels.byId[id],
-      totalMemberCount: store.users.ids.length
-    };
-  });
+  const channel = useAppSelector((store) => store.channels.byId[id], shallowEqual);
+  const totalMemberCount = useAppSelector((store) => store.users.ids.length, shallowEqual);
 
   if (!channel) return null;
   const { name, members = [], is_public, icon } = channel;
diff --git a/src/components/ChannelModal/index.tsx b/src/components/ChannelModal/index.tsx
index 287f73c7..9bc2c886 100644
--- a/src/components/ChannelModal/index.tsx
+++ b/src/components/ChannelModal/index.tsx
@@ -15,6 +15,7 @@ import Button from "../styled/Button";
 import StyledCheckbox from "../styled/Checkbox";
 import StyledToggle from "../styled/Toggle";
 import User from "../User";
+import { shallowEqual } from "react-redux";
 
 interface Props {
   personal?: boolean;
@@ -25,9 +26,8 @@ const ChannelModal: FC<Props> = ({ personal = false, closeModal }) => {
   const { t } = useTranslation("chat");
   const navigateTo = useNavigate();
   const [sendMessage] = useSendChannelMsgMutation();
-  const { loginUser, channelData } = useAppSelector((store) => {
-    return { loginUser: store.authData.user, channelData: store.channels.byId };
-  });
+  const channelData = useAppSelector((store) => store.channels.byId, shallowEqual);
+  const loginUser = useAppSelector((store) => store.authData.user, shallowEqual);
   const [data, setData] = useState<CreateChannelDTO>({
     name: "",
     description: "",
diff --git a/src/components/FileBox/index.tsx b/src/components/FileBox/index.tsx
index b6a4a3b4..3a9adbbe 100644
--- a/src/components/FileBox/index.tsx
+++ b/src/components/FileBox/index.tsx
@@ -13,6 +13,7 @@ import {
   PdfPreview,
   VideoPreview
 } from "./preview";
+import { shallowEqual } from "react-redux";
 
 interface Data {
   file_type: string;
@@ -82,7 +83,7 @@ const FileBox: FC<Props> = ({
 }) => {
   const [fetchError, setFetchError] = useState(false);
   const { isExpired, setExpired } = useExpiredResMap();
-  const fromUser = useAppSelector((store) => store.users.byId[from_uid]);
+  const fromUser = useAppSelector((store) => store.users.byId[from_uid], shallowEqual);
   const icon = getFileIcon(file_type, name, "icon w-9 h-12");
   const expired = isExpired(content);
   useEffect(() => {
diff --git a/src/components/FileMessage/index.tsx b/src/components/FileMessage/index.tsx
index 9f3866d1..17224d3d 100644
--- a/src/components/FileMessage/index.tsx
+++ b/src/components/FileMessage/index.tsx
@@ -12,6 +12,7 @@ import ExpiredMessage from "./ExpiredMessage";
 import ImageMessage from "./ImageMessage";
 import OtherFileMessage from "./OtherFileMessage";
 import VideoMessage from "./VideoMessage";
+import { shallowEqual } from "react-redux";
 
 const isLocalFile = (content: string) => {
   return content.startsWith("blob:");
@@ -64,7 +65,7 @@ const FileMessage: FC<Props> = ({
     isSuccess: uploadSuccess,
     isError
   } = useUploadFile();
-  const fromUser = useAppSelector((store) => store.users.byId[from_uid]);
+  const fromUser = useAppSelector((store) => store.users.byId[from_uid], shallowEqual);
   const { size = 0, name, content_type } = properties ?? {};
   useEffect(() => {
     const handleUpSend = async ({
diff --git a/src/components/GuestOnly.tsx b/src/components/GuestOnly.tsx
index 061bfa56..99b822c5 100644
--- a/src/components/GuestOnly.tsx
+++ b/src/components/GuestOnly.tsx
@@ -4,6 +4,7 @@ import { Navigate } from "react-router-dom";
 import { useGetInitializedQuery, useLazyGuestLoginQuery } from "@/app/services/auth";
 import { useGetLoginConfigQuery } from "@/app/services/server";
 import { useAppSelector } from "@/app/store";
+import { shallowEqual } from "react-redux";
 
 interface Props {
   children: ReactElement;
@@ -12,7 +13,7 @@ const GuestOnly: FC<Props> = ({ children }) => {
   const { data: loginConfig, isLoading: fetchingConfig } = useGetLoginConfigQuery();
   const { isLoading: initChecking } = useGetInitializedQuery();
   const [guestLogin, { isLoading: guestSigning }] = useLazyGuestLoginQuery();
-  const { token, user, initialized } = useAppSelector((store) => store.authData);
+  const { token, user, initialized } = useAppSelector((store) => store.authData, shallowEqual);
 
   useEffect(() => {
     // 未登录
diff --git a/src/components/InviteModal/AddMembers.tsx b/src/components/InviteModal/AddMembers.tsx
index 2e77108c..a1a3cfef 100644
--- a/src/components/InviteModal/AddMembers.tsx
+++ b/src/components/InviteModal/AddMembers.tsx
@@ -9,6 +9,7 @@ import Button from "../styled/Button";
 import StyledCheckbox from "../styled/Checkbox";
 import Input from "../styled/Input";
 import User from "../User";
+import { shallowEqual } from "react-redux";
 
 interface Props {
   cid?: number;
@@ -18,12 +19,8 @@ interface Props {
 const AddMembers: FC<Props> = ({ cid = 0, closeModal }) => {
   const [addMembers, { isLoading: isAdding, isSuccess }] = useAddMembersMutation();
   const [selects, setSelects] = useState<number[]>([]);
-  const { channel, userData } = useAppSelector((store) => {
-    return {
-      channel: store.channels.byId[cid],
-      userData: store.users.byId
-    };
-  });
+  const channel = useAppSelector((store) => store.channels.byId[cid], shallowEqual);
+  const userData = useAppSelector((store) => store.users.byId, shallowEqual);
   useEffect(() => {
     if (isSuccess) {
       toast.success("Add members successfully!");
diff --git a/src/components/InviteModal/index.tsx b/src/components/InviteModal/index.tsx
index 6f2250a3..6647034b 100644
--- a/src/components/InviteModal/index.tsx
+++ b/src/components/InviteModal/index.tsx
@@ -6,6 +6,7 @@ import CloseIcon from "@/assets/icons/close.svg";
 import Modal from "../Modal";
 import AddMembers from "./AddMembers";
 import InviteByEmail from "./InviteByEmail";
+import { shallowEqual } from "react-redux";
 
 interface Props {
   type?: "server" | "channel";
@@ -16,13 +17,12 @@ interface Props {
 
 const InviteModal: FC<Props> = ({ type = "server", cid, title = "", closeModal }) => {
   const { t } = useTranslation("chat");
-  const { channel, server } = useAppSelector((store) => {
-    return {
-      channel: cid ? store.channels.byId[cid] : undefined,
-      server: store.server
-    };
-  });
-  const finalTitle = type == "server" ? server.name : `#${title || channel?.name}`;
+  const channel = useAppSelector(
+    (store) => (cid ? store.channels.byId[cid] : undefined),
+    shallowEqual
+  );
+  const serverName = useAppSelector((store) => store.server.name, shallowEqual);
+  const finalTitle = type == "server" ? serverName : `#${title || channel?.name}`;
   return (
     <Modal>
       <div className="flex flex-col bg-white dark:bg-gray-900 rounded-lg max-h-[85vh] overflow-y-scroll  md:min-w-[408px] relative">
diff --git a/src/components/ManageMembers/MemberList.tsx b/src/components/ManageMembers/MemberList.tsx
index d377d3e1..6a106edd 100644
--- a/src/components/ManageMembers/MemberList.tsx
+++ b/src/components/ManageMembers/MemberList.tsx
@@ -15,6 +15,7 @@ import IconCheck from "@/assets/icons/check.sign.svg";
 import IconMore from "@/assets/icons/more.svg";
 import IconOwner from "@/assets/icons/owner.svg";
 import User from "../User";
+import { shallowEqual } from "react-redux";
 
 interface Props {
   cid?: number;
@@ -23,13 +24,9 @@ const MemberList: FC<Props> = ({ cid }) => {
   const ref = useRef<HTMLUListElement | null>(null);
   const { t } = useTranslation("member");
   const { t: ct } = useTranslation();
-  const { userMap, channels, loginUser } = useAppSelector((store) => {
-    return {
-      userMap: store.users.byId,
-      channels: store.channels,
-      loginUser: store.authData.user
-    };
-  });
+  const loginUser = useAppSelector((store) => store.authData.user, shallowEqual);
+  const userMap = useAppSelector((store) => store.users.byId, shallowEqual);
+  const channels = useAppSelector((store) => store.channels, shallowEqual);
   const { uids, input, updateInput } = useFilteredUsers();
   const { copyEmail, removeFromChannel, removeUser } = useUserOperation({ cid });
   const [updateUser, { isSuccess: updateSuccess }] = useUpdateUserMutation();
diff --git a/src/components/ManageMembers/index.tsx b/src/components/ManageMembers/index.tsx
index 39f187f1..bfef6fc7 100644
--- a/src/components/ManageMembers/index.tsx
+++ b/src/components/ManageMembers/index.tsx
@@ -3,21 +3,18 @@ import { useTranslation } from "react-i18next";
 import { useAppSelector } from "@/app/store";
 import InviteLink from "../InviteLink";
 import MemberList from "./MemberList";
+import { shallowEqual } from "react-redux";
 
 interface Props {
   cid?: number;
 }
 const ManageMembers: FC<Props> = ({ cid }) => {
   const { t } = useTranslation("member");
-  const { loginUser } = useAppSelector((store) => {
-    return {
-      loginUser: store.authData.user
-    };
-  });
+  const isAdmin = useAppSelector((store) => store.authData.user?.is_admin, shallowEqual);
 
   return (
     <section className="flex flex-col w-full">
-      {loginUser?.is_admin && <InviteLink />}
+      {isAdmin && <InviteLink />}
       <div className="flex flex-col mb-10">
         <h4 className="font-bold text-gray-700 dark:text-white">{t("manage_members")}</h4>
         <p className="text-gray-400 dark:text-gray-100 text-xs">{t("manage_tip")}</p>
diff --git a/src/components/Message/EditMessage.tsx b/src/components/Message/EditMessage.tsx
index 3ab1f62c..4b834747 100644
--- a/src/components/Message/EditMessage.tsx
+++ b/src/components/Message/EditMessage.tsx
@@ -5,6 +5,7 @@ import { useKey } from "rooks";
 import { ContentTypes } from "@/app/config";
 import { useEditMessageMutation } from "@/app/services/message";
 import { useAppSelector } from "@/app/store";
+import { shallowEqual } from "react-redux";
 
 type Props = {
   mid: number;
@@ -12,7 +13,7 @@ type Props = {
 };
 const EditMessage: FC<Props> = ({ mid, cancelEdit }) => {
   const inputRef = useRef<HTMLTextAreaElement>(null);
-  const msg = useAppSelector((store) => store.message[mid]);
+  const msg = useAppSelector((store) => store.message[mid], shallowEqual);
   const [shift, setShift] = useState(false);
   const [enter, setEnter] = useState(false);
   const [currMsg, setCurrMsg] = useState(msg?.content);
diff --git a/src/components/Message/Mention.tsx b/src/components/Message/Mention.tsx
index f5cbe9d7..be6f225f 100644
--- a/src/components/Message/Mention.tsx
+++ b/src/components/Message/Mention.tsx
@@ -3,6 +3,7 @@ import Tippy from "@tippyjs/react";
 
 import { useAppSelector } from "@/app/store";
 import Profile from "../Profile";
+import { shallowEqual } from "react-redux";
 
 interface Props {
   uid: number;
@@ -12,7 +13,7 @@ interface Props {
 }
 
 const Mention = ({ uid, popover = true, cid, textOnly = false }: Props) => {
-  const usersData = useAppSelector((store) => store.users.byId);
+  const usersData = useAppSelector((store) => store.users.byId, shallowEqual);
   const user = usersData[uid];
   if (!user) return null;
   if (textOnly) return <>{`@${user.name}`}</>;
diff --git a/src/components/Message/PreviewMessage.tsx b/src/components/Message/PreviewMessage.tsx
index 02223a7f..9bc8b240 100644
--- a/src/components/Message/PreviewMessage.tsx
+++ b/src/components/Message/PreviewMessage.tsx
@@ -4,6 +4,7 @@ import clsx from "clsx";
 import { useAppSelector } from "@/app/store";
 import Avatar from "../Avatar";
 import renderContent from "./renderContent";
+import { shallowEqual } from "react-redux";
 
 interface Props {
   mid?: number;
@@ -11,9 +12,8 @@ interface Props {
 }
 
 const PreviewMessage: FC<Props> = ({ mid = 0, context = "forward" }) => {
-  const { msg, usersData } = useAppSelector((store) => {
-    return { msg: store.message[mid], usersData: store.users.byId };
-  });
+  const usersData = useAppSelector((store) => store.users.byId, shallowEqual);
+  const msg = useAppSelector((store) => store.message[mid], shallowEqual);
   if (!msg) return null;
   const { from_uid = 0, content_type, content, thumbnail = "", properties } = msg;
   const { name, avatar } = usersData[from_uid] ?? {};
diff --git a/src/components/Message/Reaction.tsx b/src/components/Message/Reaction.tsx
index f084ec1a..95debc1a 100644
--- a/src/components/Message/Reaction.tsx
+++ b/src/components/Message/Reaction.tsx
@@ -8,6 +8,7 @@ import IconAddEmoji from "@/assets/icons/add.emoji.svg";
 import ReactionItem, { Emojis, ReactionMap } from "../ReactionItem";
 import Tooltip from "../Tooltip";
 import ReactionPicker from "./ReactionPicker";
+import { shallowEqual } from "react-redux";
 
 const ReactionDetails = ({
   uids = [],
@@ -18,7 +19,7 @@ const ReactionDetails = ({
   emoji: keyof Emojis;
   index: number;
 }) => {
-  const usersData = useAppSelector((store) => store.users.byId);
+  const usersData = useAppSelector((store) => store.users.byId, shallowEqual);
   const names = uids.map((id) => {
     return usersData[id]?.name ?? "Deleted User";
   });
@@ -52,11 +53,7 @@ type Props = {
 };
 const Reaction: FC<Props> = ({ mid, reactions = null, readOnly = false }) => {
   const [reactWithEmoji] = useReactMessageMutation();
-  const { currUid } = useAppSelector((store) => {
-    return {
-      currUid: store.authData.user?.uid
-    };
-  });
+  const currUid = useAppSelector((store) => store.authData.user?.uid, shallowEqual);
   const handleReact = (emoji: string) => {
     reactWithEmoji({ mid, action: emoji });
   };
diff --git a/src/components/Message/ReactionPicker.tsx b/src/components/Message/ReactionPicker.tsx
index 5f4a8700..40d70007 100644
--- a/src/components/Message/ReactionPicker.tsx
+++ b/src/components/Message/ReactionPicker.tsx
@@ -4,6 +4,7 @@ import { Emojis } from "@/app/config";
 import { useReactMessageMutation } from "@/app/services/message";
 import { useAppSelector } from "@/app/store";
 import Emoji from "../ReactionItem";
+import { shallowEqual } from "react-redux";
 
 type Props = {
   mid: number;
@@ -11,12 +12,8 @@ type Props = {
 };
 const ReactionPicker: FC<Props> = ({ mid, hidePicker }) => {
   const [reactMessage, { isLoading }] = useReactMessageMutation();
-  const { reactionData, currUid } = useAppSelector((store) => {
-    return {
-      reactionData: store.reactionMessage[mid] || {},
-      currUid: store.authData.user?.uid
-    };
-  });
+  const currUid = useAppSelector((store) => store.authData.user?.uid, shallowEqual);
+  const reactionData = useAppSelector((store) => store.reactionMessage[mid] || {}, shallowEqual);
   const handleReact = (emoji: string) => {
     reactMessage({ mid, action: emoji });
     hidePicker();
diff --git a/src/components/Message/Reply.tsx b/src/components/Message/Reply.tsx
index c867e712..8382d33e 100644
--- a/src/components/Message/Reply.tsx
+++ b/src/components/Message/Reply.tsx
@@ -11,6 +11,7 @@ import Avatar from "../Avatar";
 import LinkifyText from "../LinkifyText";
 import MarkdownRender from "../MarkdownRender";
 import ForwardedMessage from "./ForwardedMessage";
+import { shallowEqual } from "react-redux";
 
 const renderContent = (data: MessagePayload, context: ChatContext, to: number) => {
   const { content_type, content, thumbnail, properties, created_at, from_uid = 0 } = data;
@@ -86,9 +87,8 @@ interface ReplyProps {
 
 const Reply: FC<ReplyProps> = ({ mid, interactive = true, context, to = 0 }) => {
   const { t } = useTranslation("chat");
-  const { data, users } = useAppSelector((store) => {
-    return { data: store.message[mid], users: store.users.byId };
-  });
+  const users = useAppSelector((store) => store.users.byId, shallowEqual);
+  const data = useAppSelector((store) => store.message[mid], shallowEqual);
   const handleClick = (evt: MouseEvent<HTMLDivElement>) => {
     const { mid } = evt.currentTarget.dataset;
     const msgEle = document.querySelector<HTMLDivElement>(`[data-msg-mid='${mid}']`);
diff --git a/src/components/Message/URLPreview.tsx b/src/components/Message/URLPreview.tsx
index 667fea43..9dd649a4 100644
--- a/src/components/Message/URLPreview.tsx
+++ b/src/components/Message/URLPreview.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useDispatch } from "react-redux";
+import { shallowEqual, useDispatch } from "react-redux";
 
 import { useLazyGetOGInfoQuery } from "@/app/services/message";
 import { upsertOG } from "@/app/slices/footprint";
@@ -10,7 +10,7 @@ export default function URLPreview({ url = "" }) {
   const dispatch = useDispatch();
   const [favicon, setFavicon] = useState("");
   const [getInfo, { isLoading }] = useLazyGetOGInfoQuery();
-  const ogData = useAppSelector((store) => store.footprint.og[url]);
+  const ogData = useAppSelector((store) => store.footprint.og[url], shallowEqual);
   const [data, setData] = useState<{ title: string; description: string; ogImage: string } | null>(
     null
   );
diff --git a/src/components/Message/index.tsx b/src/components/Message/index.tsx
index f69e496a..bea0f3c2 100644
--- a/src/components/Message/index.tsx
+++ b/src/components/Message/index.tsx
@@ -19,6 +19,7 @@ import Reaction from "./Reaction";
 import renderContent from "./renderContent";
 import Reply from "./Reply";
 import useInView from "./useInView";
+import { shallowEqual } from "react-redux";
 
 interface IProps {
   readOnly?: boolean;
@@ -41,17 +42,14 @@ const Message: FC<IProps> = ({
   const [edit, setEdit] = useState(false);
   const avatarRef = useRef(null);
   const { getPinInfo } = usePinMessage(context == "channel" ? contextId : 0);
-  const { message, reactionMessageData, usersData, loginUid, enableRightLayout } = useAppSelector(
-    (store) => {
-      return {
-        enableRightLayout: store.server.chat_layout_mode == "SelfRight",
-        reactionMessageData: store.reactionMessage,
-        message: store.message[mid],
-        usersData: store.users.byId,
-        loginUid: store.authData.user?.uid
-      };
-    }
+  const message = useAppSelector((store) => store.message[mid], shallowEqual);
+  const enableRightLayout = useAppSelector(
+    (store) => store.server.chat_layout_mode == "SelfRight",
+    shallowEqual
   );
+  const loginUid = useAppSelector((store) => store.authData.user?.uid, shallowEqual);
+  const usersData = useAppSelector((store) => store.users.byId, shallowEqual);
+  const reactionMessageData = useAppSelector((store) => store.reactionMessage, shallowEqual);
 
   const toggleEditMessage = () => {
     setEdit((prev) => !prev);
diff --git a/src/components/Message/useMessageOperation.tsx b/src/components/Message/useMessageOperation.tsx
index 365c801e..f4327211 100644
--- a/src/components/Message/useMessageOperation.tsx
+++ b/src/components/Message/useMessageOperation.tsx
@@ -9,6 +9,7 @@ import usePinMessage from "@/hooks/usePinMessage";
 import DeleteMessageConfirm from "../DeleteMessageConfirm";
 import ForwardModal from "../ForwardModal";
 import PinMessageModal from "./PinMessageModal";
+import { shallowEqual } from "react-redux";
 
 interface Params {
   mid: number;
@@ -18,13 +19,12 @@ interface Params {
 
 export default function useMessageOperation({ mid, context, contextId }: Params) {
   const { copy } = useCopy();
-  const { loginUser, message, channel } = useAppSelector((store) => {
-    return {
-      channel: context == "channel" ? store.channels.byId[contextId] : undefined,
-      message: store.message[mid],
-      loginUser: store.authData.user
-    };
-  });
+  const message = useAppSelector((store) => store.message[mid], shallowEqual);
+  const loginUser = useAppSelector((store) => store.authData.user, shallowEqual);
+  const channel = useAppSelector(
+    (store) => (context == "channel" ? store.channels.byId[contextId] : undefined),
+    shallowEqual
+  );
   const { canPin, pins, unpinMessage, isUnpinSuccess } = usePinMessage(
     context == "channel" ? contextId : 0
   );
diff --git a/src/components/Meta.tsx b/src/components/Meta.tsx
index 118d1406..86ef0621 100644
--- a/src/components/Meta.tsx
+++ b/src/components/Meta.tsx
@@ -2,11 +2,12 @@ import { FC } from "react";
 import { Helmet } from "react-helmet";
 import { useAppSelector } from "@/app/store";
 import { useGetServerQuery } from "@/app/services/server";
+import { shallowEqual } from "react-redux";
 
 type Props = {};
 const Meta: FC<Props> = () => {
   useGetServerQuery();
-  const { name, logo } = useAppSelector((store) => store.server);
+  const { name, logo } = useAppSelector((store) => store.server, shallowEqual);
   return (
     <Helmet>
       {name && <title>{name} Web App</title>}
diff --git a/src/components/MixedInput/index.tsx b/src/components/MixedInput/index.tsx
index 9f741038..1a0f5322 100644
--- a/src/components/MixedInput/index.tsx
+++ b/src/components/MixedInput/index.tsx
@@ -25,6 +25,7 @@ import useUploadFile from "@/hooks/useUploadFile";
 import { isMobile } from "@/utils";
 import User from "../User";
 import { CONFIG } from "./config";
+import { shallowEqual } from "react-redux";
 
 export const TEXT_EDITOR_PREFIX = "_text_editor";
 
@@ -55,7 +56,7 @@ const Plugins: FC<Props> = ({
   const [context, to] = id.split("_") as [ChatContext, number];
   const { addStageFile } = useUploadFile({ context, id: to });
   const enableMentions = members.length > 0;
-  const userData = useAppSelector((store) => store.users.byId);
+  const userData = useAppSelector((store) => store.users.byId, shallowEqual);
   const editableRef = useRef(null);
   const initialProps = {
     ...CONFIG.editableProps,
diff --git a/src/components/PinnedMessage.tsx b/src/components/PinnedMessage.tsx
index 141ccc78..75162853 100644
--- a/src/components/PinnedMessage.tsx
+++ b/src/components/PinnedMessage.tsx
@@ -7,15 +7,15 @@ import { PinnedMessage } from "@/types/channel";
 import { normalizeFileMessage } from "../utils";
 import Avatar from "./Avatar";
 import renderContent from "./Message/renderContent";
+import { shallowEqual } from "react-redux";
 
 interface Props {
   data: PinnedMessage;
 }
 
 const PinnedMessageView: FC<Props> = ({ data }) => {
-  const { msgData, usersData } = useAppSelector((store) => {
-    return { msgData: store.message, usersData: store.users.byId };
-  });
+  const msgData = useAppSelector((store) => store.message, shallowEqual);
+  const usersData = useAppSelector((store) => store.users.byId, shallowEqual);
   // console.log("piiii", data);
 
   const { mid = 0 } = data;
diff --git a/src/components/Profile/index.tsx b/src/components/Profile/index.tsx
index 3e407511..0f1f04be 100644
--- a/src/components/Profile/index.tsx
+++ b/src/components/Profile/index.tsx
@@ -12,6 +12,7 @@ import IconMessage from "@/assets/icons/message.svg";
 import IconMore from "@/assets/icons/more.svg";
 import Avatar from "../Avatar";
 import ContextMenu, { Item } from "../ContextMenu";
+import { shallowEqual } from "react-redux";
 
 interface Props {
   uid: number;
@@ -36,11 +37,7 @@ const Profile: FC<Props> = ({ uid, type = "embed", cid }) => {
     updateRole
   } = useUserOperation({ uid, cid });
 
-  const { data } = useAppSelector((store) => {
-    return {
-      data: store.users.byId[uid]
-    };
-  });
+  const data = useAppSelector((store) => store.users.byId[uid], shallowEqual);
   if (!data) return null;
   // console.log("profile", data);
   const {
diff --git a/src/components/QRCode.tsx b/src/components/QRCode.tsx
index 5086389c..6169bd2a 100644
--- a/src/components/QRCode.tsx
+++ b/src/components/QRCode.tsx
@@ -1,6 +1,7 @@
 import QR from "qrcode.react";
 
 import { useAppSelector } from "@/app/store";
+import { shallowEqual } from "react-redux";
 
 type Props = {
   link: string;
@@ -9,7 +10,7 @@ type Props = {
 };
 
 const QRCode = ({ link, size = 512, level = "L" }: Props) => {
-  const logo = useAppSelector((store) => store.server.logo);
+  const logo = useAppSelector((store) => store.server.logo, shallowEqual);
   return (
     <div className="p-2 bg-white dark:bg-slate-200 rounded">
       <QR
diff --git a/src/components/RequireAuth.tsx b/src/components/RequireAuth.tsx
index a2beecdf..4fc07f7d 100644
--- a/src/components/RequireAuth.tsx
+++ b/src/components/RequireAuth.tsx
@@ -1,9 +1,10 @@
-import { FC, ReactElement } from "react";
+import { FC, ReactElement, memo } from "react";
 import { matchRoutes, Navigate, useLocation } from "react-router-dom";
 
 import { GuestRoutes, KEY_LOCAL_TRY_PATH } from "@/app/config";
 import { useAppSelector } from "@/app/store";
 import Loading from "./Loading";
+import { shallowEqual } from "react-redux";
 
 interface Props {
   children: ReactElement;
@@ -16,15 +17,10 @@ const RequireAuth: FC<Props> = ({ children, redirectTo = "/login" }) => {
   const location = useLocation();
   const matches = matchRoutes(GuestAllows, location);
   const allowGuest = matches ? !!matches[0].pathname : false;
-  const {
-    authData: { token, guest, initialized },
-    loginConfig
-  } = useAppSelector((store) => {
-    return {
-      authData: store.authData,
-      loginConfig: store.server.loginConfig
-    };
-  });
+  const token = useAppSelector((store) => store.authData.token, shallowEqual);
+  const guest = useAppSelector((store) => store.authData.guest, shallowEqual);
+  const initialized = useAppSelector((store) => store.authData.initialized, shallowEqual);
+  const loginConfig = useAppSelector((store) => store.server.loginConfig, shallowEqual);
   console.info("check basic info", loginConfig);
   // 初始化login配置检查
   if (!loginConfig) return <Loading fullscreen={true} context="auth-route" />;
@@ -55,4 +51,4 @@ const RequireAuth: FC<Props> = ({ children, redirectTo = "/login" }) => {
   return children;
 };
 
-export default RequireAuth;
+export default memo(RequireAuth);
diff --git a/src/components/RequireNoAuth.tsx b/src/components/RequireNoAuth.tsx
index 62b1e462..efeccd90 100644
--- a/src/components/RequireNoAuth.tsx
+++ b/src/components/RequireNoAuth.tsx
@@ -3,6 +3,7 @@ import { Navigate } from "react-router-dom";
 
 import { useGetInitializedQuery } from "@/app/services/auth";
 import { useAppSelector } from "@/app/store";
+import { shallowEqual } from "react-redux";
 
 interface Props {
   children: ReactElement;
@@ -11,7 +12,7 @@ interface Props {
 
 const RequireNoAuth: FC<Props> = ({ children, redirectTo = "/" }) => {
   const { isLoading } = useGetInitializedQuery();
-  const { token, initialized, guest } = useAppSelector((store) => store.authData);
+  const { token, initialized, guest } = useAppSelector((store) => store.authData, shallowEqual);
   if (isLoading) return null;
   //  未初始化 则先走setup 流程
   if (!initialized) return <Navigate to={`/onboarding`} replace />;
diff --git a/src/components/SearchUser.tsx b/src/components/SearchUser.tsx
index 3f454945..61a2f0c4 100644
--- a/src/components/SearchUser.tsx
+++ b/src/components/SearchUser.tsx
@@ -13,6 +13,7 @@ import Avatar from "./Avatar";
 import Modal from "./Modal";
 import StyledButton from "./styled/Button";
 import Input from "./styled/Input";
+import { shallowEqual } from "react-redux";
 
 type Props = {
   closeModal: () => void;
@@ -21,7 +22,7 @@ type Type = "id" | "email" | "name";
 
 const SearchUser: FC<Props> = ({ closeModal }) => {
   const [updateContactStatus, { isLoading: adding }] = useUpdateContactStatusMutation();
-  const usersData = useAppSelector((store) => store.users.byId);
+  const usersData = useAppSelector((store) => store.users.byId, shallowEqual);
   const { t } = useTranslation();
   const navigateTo = useNavigate();
   const inputRef = useRef(null);
diff --git a/src/components/Send/Replying.tsx b/src/components/Send/Replying.tsx
index d02dc9c5..e3f877f1 100644
--- a/src/components/Send/Replying.tsx
+++ b/src/components/Send/Replying.tsx
@@ -8,6 +8,7 @@ import IconClose from "@/assets/icons/close.circle.svg";
 import pictureIcon from "@/assets/icons/picture.svg?url";
 import LinkifyText from "../LinkifyText";
 import MarkdownRender from "../MarkdownRender";
+import { shallowEqual } from "react-redux";
 
 const renderContent = (data: MessagePayload) => {
   const { content_type, content, thumbnail = "", properties } = data;
@@ -69,9 +70,8 @@ export default function Replying({
   mid: number;
 }) {
   const { removeReplying } = useSendMessage({ to: id, context });
-  const { msg, usersData } = useAppSelector((store) => {
-    return { usersData: store.users.byId, msg: store.message[mid] };
-  });
+  const usersData = useAppSelector((store) => store.users.byId, shallowEqual);
+  const msg = useAppSelector((store) => store.message[mid], shallowEqual);
   const removeReply = () => {
     removeReplying();
   };
diff --git a/src/components/Send/index.tsx b/src/components/Send/index.tsx
index 70c0b6f5..4e56d431 100644
--- a/src/components/Send/index.tsx
+++ b/src/components/Send/index.tsx
@@ -20,6 +20,7 @@ import Replying from "./Replying";
 import Toolbar from "./Toolbar";
 // import StyledSend from "./styled";
 import UploadFileList from "./UploadFileList";
+import { shallowEqual } from "react-redux";
 
 const Modes = {
   text: "text",
@@ -48,18 +49,19 @@ const Send: FC<IProps> = ({
   const dispatch = useAppDispatch();
   const addLocalFileMessage = useAddLocalFileMessage({ context, to: id });
   // 谁发的
-  const { from_uid, replying_mid, mode, uploadFiles, channelsData, usersData, uids } =
-    useAppSelector((store) => {
-      return {
-        channelsData: store.channels.byId,
-        uids: store.users.ids,
-        usersData: store.users.byId,
-        mode: store.ui.inputMode,
-        from_uid: store.authData.user?.uid,
-        replying_mid: store.message.replying[`${context}_${id}`],
-        uploadFiles: store.ui.uploadFiles[`${context}_${id}`] ?? []
-      };
-    });
+  const from_uid = useAppSelector((store) => store.authData.user?.uid, shallowEqual);
+  const replying_mid = useAppSelector(
+    (store) => store.message.replying[`${context}_${id}`],
+    shallowEqual
+  );
+  const mode = useAppSelector((store) => store.ui.inputMode, shallowEqual);
+  const uploadFiles = useAppSelector(
+    (store) => store.ui.uploadFiles[`${context}_${id}`] ?? [],
+    shallowEqual
+  );
+  const uids = useAppSelector((store) => store.users.ids, shallowEqual);
+  const channelsData = useAppSelector((store) => store.channels.byId, shallowEqual);
+  const usersData = useAppSelector((store) => store.users.byId, shallowEqual);
   const { sendMessage } = useSendMessage({ context, from: from_uid, to: id });
 
   useEffect(() => {
diff --git a/src/components/Server.tsx b/src/components/Server.tsx
index b8481065..4062c73d 100644
--- a/src/components/Server.tsx
+++ b/src/components/Server.tsx
@@ -6,6 +6,7 @@ import { useAppSelector } from "@/app/store";
 import IconAdd from "@/assets/icons/add.svg";
 import AddEntriesMenu from "./AddEntriesMenu";
 import Tooltip from "./Tooltip";
+import { shallowEqual } from "react-redux";
 
 type Props = {
   readonly?: boolean;
@@ -13,14 +14,9 @@ type Props = {
 export default function Server({ readonly = false }: Props) {
   const { t } = useTranslation();
   const { pathname } = useLocation();
-  const { server, userCount } = useAppSelector((store) => {
-    return {
-      userCount: store.users.ids.length,
-      server: store.server
-    };
-  });
+  const { name, description, logo } = useAppSelector((store) => store.server, shallowEqual);
+  const userCount = useAppSelector((store) => store.users.ids.length, shallowEqual);
   // console.log("server info", server);
-  const { name, description, logo } = server;
   if (readonly)
     return (
       <NavLink to={"/"} className="relative flex items-center justify-between gap-2 px-4 py-2">
diff --git a/src/components/ServerVersionChecker.tsx b/src/components/ServerVersionChecker.tsx
index 99b44c68..4a550d12 100644
--- a/src/components/ServerVersionChecker.tsx
+++ b/src/components/ServerVersionChecker.tsx
@@ -3,6 +3,7 @@ import { Trans, useTranslation } from "react-i18next";
 
 import { useAppSelector } from "../app/store";
 import { compareVersion } from "../utils";
+import { shallowEqual } from "react-redux";
 
 type Props = {
   empty?: boolean;
@@ -12,7 +13,7 @@ type Props = {
 
 const ServerVersionChecker = ({ empty = false, version, children }: Props) => {
   const { t } = useTranslation();
-  const currentVersion = useAppSelector((store) => store.server.version);
+  const currentVersion = useAppSelector((store) => store.server.version, shallowEqual);
   if (!currentVersion) return null;
   const res = compareVersion(currentVersion, version);
   if (res < 0)
diff --git a/src/components/StreamStatus.tsx b/src/components/StreamStatus.tsx
index 9f06ec80..72add17b 100644
--- a/src/components/StreamStatus.tsx
+++ b/src/components/StreamStatus.tsx
@@ -1,11 +1,12 @@
 import { useAppSelector } from "@/app/store";
 import clsx from "clsx";
+import { shallowEqual } from "react-redux";
 // import React from "react";
 
 type Props = {};
 
 const StreamStatus = (props: Props) => {
-  const status = useAppSelector((store) => store.ui.SSEStatus);
+  const status = useAppSelector((store) => store.ui.SSEStatus, shallowEqual);
   return (
     <aside className="fixed right-2 bottom-2">
       <div
diff --git a/src/components/UnreadTabTip.tsx b/src/components/UnreadTabTip.tsx
index 63b7faf2..30143d14 100644
--- a/src/components/UnreadTabTip.tsx
+++ b/src/components/UnreadTabTip.tsx
@@ -2,34 +2,21 @@ import { useEffect } from "react";
 
 import { useAppSelector } from "../app/store";
 import getUnreadCount from "../routes/chat/utils";
+import { shallowEqual } from "react-redux";
 
 // type Props = {}
 let total = 0;
 let title = "";
 const UnreadTabTip = () => {
-  const {
-    muteChannels,
-    muteUsers,
-    userData,
-    dmMids,
-    channelMids,
-    messageData,
-    readChannels,
-    readUsers,
-    loginUid
-  } = useAppSelector((store) => {
-    return {
-      userData: store.users.byId,
-      dmMids: store.userMessage.byId,
-      channelMids: store.channelMessage,
-      messageData: store.message,
-      readChannels: store.footprint.readChannels,
-      readUsers: store.footprint.readUsers,
-      muteChannels: store.footprint.muteChannels,
-      muteUsers: store.footprint.muteUsers,
-      loginUid: store.authData.user?.uid ?? 0
-    };
-  });
+  const loginUid = useAppSelector((store) => store.authData.user?.uid ?? 0, shallowEqual);
+  const muteChannels = useAppSelector((store) => store.footprint.muteChannels, shallowEqual);
+  const muteUsers = useAppSelector((store) => store.footprint.muteUsers, shallowEqual);
+  const readChannels = useAppSelector((store) => store.footprint.readChannels, shallowEqual);
+  const readUsers = useAppSelector((store) => store.footprint.readUsers, shallowEqual);
+  const userData = useAppSelector((store) => store.users.byId, shallowEqual);
+  const DMMap = useAppSelector((store) => store.userMessage.byId, shallowEqual);
+  const channelMids = useAppSelector((store) => store.channelMessage, shallowEqual);
+  const messageData = useAppSelector((store) => store.message, shallowEqual);
 
   useEffect(() => {
     if (loginUid === 0) {
@@ -40,8 +27,8 @@ const UnreadTabTip = () => {
     }
     total = 0;
     // dm
-    Object.entries(dmMids).forEach(([id, mids]) => {
-      if (!muteUsers[id]) {
+    Object.entries(DMMap).forEach(([id, mids]) => {
+      if (!muteUsers[+id]) {
         if (userData[+id]) {
           const { unreads = 0 } = getUnreadCount({
             mids,
@@ -55,7 +42,7 @@ const UnreadTabTip = () => {
     });
     // channel
     Object.entries(channelMids).map(([id, mids]) => {
-      if (!muteChannels[id]) {
+      if (!muteChannels[+id]) {
         const { unreads = 0 } = getUnreadCount({
           mids,
           readIndex: readChannels[+id],
@@ -86,7 +73,7 @@ const UnreadTabTip = () => {
     };
   }, [
     userData,
-    dmMids,
+    DMMap,
     channelMids,
     readChannels,
     messageData,
@@ -95,6 +82,7 @@ const UnreadTabTip = () => {
     muteChannels,
     muteUsers
   ]);
+  console.log("unread tip", total);
 
   return null;
 };
diff --git a/src/components/User/index.tsx b/src/components/User/index.tsx
index aa77d46e..d7d353f4 100644
--- a/src/components/User/index.tsx
+++ b/src/components/User/index.tsx
@@ -10,6 +10,7 @@ import IconOwner from "@/assets/icons/owner.svg";
 import Avatar from "../Avatar";
 import Profile from "../Profile";
 import ContextMenu from "./ContextMenu";
+import { shallowEqual } from "react-redux";
 
 interface Props {
   uid: number;
@@ -38,13 +39,9 @@ const User: FC<Props> = ({
 }) => {
   const navigate = useNavigate();
   const { visible: contextMenuVisible, handleContextMenuEvent, hideContextMenu } = useContextMenu();
-  const { curr, loginUid, showStatus } = useAppSelector((store) => {
-    return {
-      curr: store.users.byId[uid],
-      loginUid: store.authData.user?.uid,
-      showStatus: store.server.show_user_online_status
-    };
-  });
+  const curr = useAppSelector((store) => store.users.byId[uid], shallowEqual);
+  const loginUid = useAppSelector((store) => store.authData.user?.uid, shallowEqual);
+  const showStatus = useAppSelector((store) => store.server.show_user_online_status, shallowEqual);
   const handleDoubleClick = () => {
     navigate(`/chat/dm/${uid}`);
   };
diff --git a/src/components/Version.tsx b/src/components/Version.tsx
index 3a2cafcd..f2130ec7 100644
--- a/src/components/Version.tsx
+++ b/src/components/Version.tsx
@@ -6,10 +6,11 @@ import dayjs from "dayjs";
 import { useAppSelector } from "@/app/store";
 import { unregister } from "../serviceWorkerRegistration";
 import Button from "./styled/Button";
+import { shallowEqual } from "react-redux";
 
 type Props = {};
 const Version: FC<Props> = () => {
-  const serverVersion = useAppSelector((store) => store.server.version);
+  const serverVersion = useAppSelector((store) => store.server.version, shallowEqual);
   const [syncing, setSyncing] = useState(false);
   const { t } = useTranslation("setting", { keyPrefix: "version" });
   const ts = (process.env.REACT_APP_BUILD_TIME ?? 0) as number;
diff --git a/src/components/Voice/DMCalling.tsx b/src/components/Voice/DMCalling.tsx
index 368d710e..07a2f740 100644
--- a/src/components/Voice/DMCalling.tsx
+++ b/src/components/Voice/DMCalling.tsx
@@ -1,6 +1,6 @@
 // import React from 'react';
 import { useEffect, useRef } from "react";
-import { useDispatch } from "react-redux";
+import { shallowEqual, useDispatch } from "react-redux";
 import { useLocation, useNavigate } from "react-router-dom";
 // import { useTranslation } from 'react-i18next';
 import { Waveform } from "@uiball/loaders";
@@ -27,17 +27,12 @@ const DMCalling = ({ from, to = 0 }: Props) => {
   const dispatch = useDispatch();
   const { leave, joinVoice, joining } = useVoice({ id: to, context: "dm" });
   const containerRef = useRef(null);
-  const { calling, voicingMembers, fromUser, toUser, loginUser } = useAppSelector((store) => {
-    return {
-      calling: store.voice.calling,
-      // voicingInfo: store.voice.voicing ?? {},
-      voicingMembers: store.voice.voicingMembers,
-      fromUser: store.users.byId[from],
-      toUser: store.users.byId[to],
-      loginUser: store.authData.user
-    };
-  });
-  const sendByMe = loginUser?.uid !== toUser.uid;
+  const loginUid = useAppSelector((store) => store.authData.user?.uid, shallowEqual);
+  const calling = useAppSelector((store) => store.voice.calling, shallowEqual);
+  const voicingMembers = useAppSelector((store) => store.voice.voicingMembers, shallowEqual);
+  const fromUser = useAppSelector((store) => store.users.byId[from], shallowEqual);
+  const toUser = useAppSelector((store) => store.users.byId[to], shallowEqual);
+  const sendByMe = loginUid !== toUser.uid;
 
   useEffect(() => {
     const ids = voicingMembers.ids;
diff --git a/src/components/Voice/Operations.tsx b/src/components/Voice/Operations.tsx
index a034690b..ab00eebd 100644
--- a/src/components/Voice/Operations.tsx
+++ b/src/components/Voice/Operations.tsx
@@ -1,6 +1,6 @@
 import { Dispatch, MouseEvent, SetStateAction, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useDispatch } from "react-redux";
+import { shallowEqual, useDispatch } from "react-redux";
 import Tippy from "@tippyjs/react";
 import AgoraRTC, { ICameraVideoTrack, IMicrophoneAudioTrack } from "agora-rtc-sdk-ng";
 import clsx from "clsx";
@@ -44,7 +44,7 @@ const DeviceList = ({
     selected: string;
   }[];
 }) => {
-  const loginUid = useAppSelector((store) => store.authData.user?.uid ?? 0);
+  const loginUid = useAppSelector((store) => store.authData.user?.uid ?? 0, shallowEqual);
   const dispatch = useDispatch();
   // const { t } = useTranslation("chat");
   const toggleVisible = (evt: MouseEvent<HTMLDivElement>) => {
@@ -166,7 +166,7 @@ type Props = {
 
 const Operations = ({ id, context, mode = "channel" }: Props) => {
   const dispatch = useDispatch();
-  const loginUid = useAppSelector((store) => store.authData.user?.uid ?? 0);
+  const loginUid = useAppSelector((store) => store.authData.user?.uid ?? 0, shallowEqual);
 
   const [panelVisible, setPanelVisible] = useState<VisibleType>("");
   const {
diff --git a/src/components/Voice/index.tsx b/src/components/Voice/index.tsx
index 014a7f51..bd58ea17 100644
--- a/src/components/Voice/index.tsx
+++ b/src/components/Voice/index.tsx
@@ -1,5 +1,5 @@
 import { memo, useEffect } from "react";
-import { useDispatch } from "react-redux";
+import { shallowEqual, useDispatch } from "react-redux";
 import AgoraRTC from "agora-rtc-sdk-ng";
 
 import {
@@ -26,15 +26,11 @@ window.VIDEO_TRACK_MAP = window.VIDEO_TRACK_MAP ?? {};
 const inIframe = isInIframe();
 // let tmpUids: number[] = [];
 const Voice = () => {
-  const { from, to, voiceList, loginUid, voicingInfo } = useAppSelector((store) => {
-    return {
-      voicingInfo: store.voice.voicing,
-      voiceList: store.voice.list,
-      from: store.voice.callingFrom,
-      to: store.voice.callingTo,
-      loginUid: store.authData.user?.uid
-    };
-  });
+  const loginUid = useAppSelector((store) => store.authData.user?.uid, shallowEqual);
+  const from = useAppSelector((store) => store.voice.callingFrom, shallowEqual);
+  const to = useAppSelector((store) => store.voice.callingTo, shallowEqual);
+  const voiceList = useAppSelector((store) => store.voice.list, shallowEqual);
+  const voicingInfo = useAppSelector((store) => store.voice.voicing, shallowEqual);
   const { data: enabled } = useGetAgoraStatusQuery();
   const [getUsersByChannel] = useLazyGetAgoraUsersByChannelQuery();
   useGetAgoraChannelsQuery(
diff --git a/src/components/Voice/useVoice.ts b/src/components/Voice/useVoice.ts
index 1a59e8c8..ddd56b4e 100644
--- a/src/components/Voice/useVoice.ts
+++ b/src/components/Voice/useVoice.ts
@@ -1,4 +1,4 @@
-import { useDispatch } from "react-redux";
+import { shallowEqual, useDispatch } from "react-redux";
 import AgoraRTC, { ICameraVideoTrack, IMicrophoneAudioTrack } from "agora-rtc-sdk-ng";
 
 import AudioJoin from "@/assets/join.wav";
@@ -22,32 +22,39 @@ type VoiceProps = {
 const audioJoin = new Audio(AudioJoin);
 const useVoice = ({ id, context = "channel" }: VoiceProps) => {
   const dispatch = useDispatch();
-  const {
-    voicingInfo,
-    loginUid,
-    audioInputDevices,
-    audioOutputDevices,
-    videoInputDevices,
-    audioInputDeviceId,
-    audioOutputDeviceId,
-    videoInputDeviceId,
-    fullscreen
-  } = useAppSelector((store) => {
-    return {
-      fullscreen:
-        context == "channel"
-          ? store.footprint.channelAsides[id] == "voice_fullscreen"
-          : store.footprint.dmAsides[id] == "voice_fullscreen",
-      loginUid: store.authData.user?.uid ?? 0,
-      voicingInfo: store.voice.voicing,
-      audioInputDevices: store.voice.devices.filter((d) => d.kind == "audioinput") ?? [],
-      audioOutputDevices: store.voice.devices.filter((d) => d.kind == "audiooutput") ?? [],
-      videoInputDevices: store.voice.devices.filter((d) => d.kind == "videoinput") ?? [],
-      audioInputDeviceId: store.voice.audioInputDeviceId,
-      audioOutputDeviceId: store.voice.audioOutputDeviceId,
-      videoInputDeviceId: store.voice.videoInputDeviceId
-    };
-  });
+  const loginUid = useAppSelector((store) => store.authData.user?.uid ?? 0, shallowEqual);
+  const voicingInfo = useAppSelector((store) => store.voice.voicing, shallowEqual);
+  const fullscreen = useAppSelector(
+    (store) =>
+      context == "channel"
+        ? store.footprint.channelAsides[id] == "voice_fullscreen"
+        : store.footprint.dmAsides[id] == "voice_fullscreen",
+    shallowEqual
+  );
+  const audioInputDevices = useAppSelector(
+    (store) => store.voice.devices.filter((d) => d.kind == "audioinput") ?? [],
+    shallowEqual
+  );
+  const audioOutputDevices = useAppSelector(
+    (store) => store.voice.devices.filter((d) => d.kind == "audiooutput") ?? [],
+    shallowEqual
+  );
+  const videoInputDevices = useAppSelector(
+    (store) => store.voice.devices.filter((d) => d.kind == "videoinput") ?? [],
+    shallowEqual
+  );
+  const audioInputDeviceId = useAppSelector(
+    (store) => store.voice.audioInputDeviceId,
+    shallowEqual
+  );
+  const audioOutputDeviceId = useAppSelector(
+    (store) => store.voice.audioOutputDeviceId,
+    shallowEqual
+  );
+  const videoInputDeviceId = useAppSelector(
+    (store) => store.voice.videoInputDeviceId,
+    shallowEqual
+  );
   const [generateToken] = useGenerateAgoraTokenMutation();
   // const [joining, setJoining] = useState(false);
   const joinVoice = async () => {
diff --git a/src/hooks/useDeleteMessage.ts b/src/hooks/useDeleteMessage.ts
index 34e66e8d..0f75822d 100644
--- a/src/hooks/useDeleteMessage.ts
+++ b/src/hooks/useDeleteMessage.ts
@@ -3,16 +3,13 @@ import { useState } from "react";
 import { useLazyDeleteMessageQuery, useLazyDeleteMessagesQuery } from "@/app/services/message";
 import { useAppSelector } from "@/app/store";
 import { compareVersion } from "@/utils";
+import { shallowEqual } from "react-redux";
 
 export default function useDeleteMessage() {
   const [deleting, setDeleting] = useState(false);
-  const { loginUser, messageData, serverVersion } = useAppSelector((store) => {
-    return {
-      serverVersion: store.server.version,
-      messageData: store.message,
-      loginUser: store.authData.user
-    };
-  });
+  const loginUser = useAppSelector((store) => store.authData.user, shallowEqual);
+  const serverVersion = useAppSelector((store) => store.server.version, shallowEqual);
+  const messageData = useAppSelector((store) => store.message, shallowEqual);
   const [batchRemove] = useLazyDeleteMessagesQuery();
   const [
     remove
diff --git a/src/hooks/useDraft.ts b/src/hooks/useDraft.ts
index 6120ceb1..58de2efe 100644
--- a/src/hooks/useDraft.ts
+++ b/src/hooks/useDraft.ts
@@ -1,16 +1,13 @@
 import { updateDraftMarkdown, updateDraftMixedText } from "@/app/slices/ui";
 import { useAppDispatch, useAppSelector } from "@/app/store";
 import { ChatContext } from "@/types/common";
+import { shallowEqual } from "react-redux";
 
 const useDraft = ({ context = "dm", id = 0 }: { context: ChatContext; id: number }) => {
   const dispatch = useAppDispatch();
   const _key = `${context}_${id}`;
-  const { draftMarkdown, draftMixedText } = useAppSelector((store) => {
-    return {
-      draftMarkdown: store.ui.draftMarkdown,
-      draftMixedText: store.ui.draftMixedText
-    };
-  });
+  const draftMarkdown = useAppSelector((store) => store.ui.draftMarkdown, shallowEqual);
+  const draftMixedText = useAppSelector((store) => store.ui.draftMixedText, shallowEqual);
 
   const getUpdateDraft = (type = "mixed") => {
     const update = type == "mixed" ? updateDraftMixedText : updateDraftMarkdown;
diff --git a/src/hooks/useFavMessage.ts b/src/hooks/useFavMessage.ts
index 41781c6c..26e782c8 100644
--- a/src/hooks/useFavMessage.ts
+++ b/src/hooks/useFavMessage.ts
@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 import { useFavoriteMessageMutation, useLazyRemoveFavoriteQuery } from "@/app/services/message";
 import { Favorite } from "@/app/slices/favorites";
 import { useAppSelector } from "@/app/store";
+import { shallowEqual } from "react-redux";
 
 export default function useFavMessage({
   cid = null,
@@ -14,9 +15,7 @@ export default function useFavMessage({
   const [removeFav] = useLazyRemoveFavoriteQuery();
   const [addFav] = useFavoriteMessageMutation();
   const [favorites, setFavorites] = useState<Favorite[]>([]);
-  const { favs = [] } = useAppSelector((store) => {
-    return { favs: store.favorites };
-  });
+  const favs = useAppSelector((store) => store.favorites ?? [], shallowEqual);
 
   const addFavorite = async (mid: number | number[]) => {
     const mids = Array.isArray(mid) ? mid.map((i) => +i) : [+mid];
diff --git a/src/hooks/useFilteredChannels.ts b/src/hooks/useFilteredChannels.ts
index ad1f5e9f..6cda2135 100644
--- a/src/hooks/useFilteredChannels.ts
+++ b/src/hooks/useFilteredChannels.ts
@@ -2,10 +2,11 @@ import { useEffect, useState } from "react";
 
 import { useAppSelector } from "@/app/store";
 import { Channel } from "@/types/channel";
+import { shallowEqual } from "react-redux";
 
 export default function useFilteredChannels() {
   const [input, setInput] = useState("");
-  const channels = useAppSelector((store) => Object.values(store.channels.byId));
+  const channels = useAppSelector((store) => Object.values(store.channels.byId), shallowEqual);
   const [filteredChannels, setFilteredChannels] = useState<Channel[]>([]);
 
   useEffect(() => {
diff --git a/src/hooks/useFilteredUsers.ts b/src/hooks/useFilteredUsers.ts
index 4bbb2859..d57b15a5 100644
--- a/src/hooks/useFilteredUsers.ts
+++ b/src/hooks/useFilteredUsers.ts
@@ -3,16 +3,16 @@ import { escapeRegExp } from "lodash";
 
 import { StoredUser } from "@/app/slices/users";
 import { useAppSelector } from "@/app/store";
+import { shallowEqual } from "react-redux";
 
 export default function useFilteredUsers() {
   const [input, setInput] = useState("");
-  const { originUsers, enableContact, isAdmin } = useAppSelector((store) => {
-    return {
-      isAdmin: store.authData.user?.is_admin,
-      enableContact: store.server.contact_verification_enable,
-      originUsers: Object.values(store.users.byId)
-    };
-  });
+  const isAdmin = useAppSelector((store) => store.authData.user?.is_admin, shallowEqual);
+  const originUsers = useAppSelector((store) => Object.values(store.users.byId), shallowEqual);
+  const enableContact = useAppSelector(
+    (store) => store.server.contact_verification_enable,
+    shallowEqual
+  );
   const [filteredUsers, setFilteredUsers] = useState<StoredUser[]>([]);
   const useContactList = enableContact && !isAdmin;
   const users = useContactList ? originUsers.filter((u) => u.status == "added") : originUsers;
diff --git a/src/hooks/useInviteLink.ts b/src/hooks/useInviteLink.ts
index c112a6bf..ff665ef1 100644
--- a/src/hooks/useInviteLink.ts
+++ b/src/hooks/useInviteLink.ts
@@ -8,6 +8,7 @@ import {
 import { useGetSMTPStatusQuery } from "@/app/services/server";
 import { useAppSelector } from "@/app/store";
 import useCopy from "./useCopy";
+import { shallowEqual } from "react-redux";
 
 const defaultExpire = getInviteLinkExpireList()[4].value;
 const defaultTimes = getInviteLinkTimesList()[0].value;
@@ -15,7 +16,7 @@ type ParamsProps = { expire: number; times: number };
 const defaultParams: ParamsProps = { expire: defaultExpire, times: defaultTimes };
 export default function useInviteLink(cid?: number) {
   const [finalLink, setFinalLink] = useState("");
-  const channel = useAppSelector((store) => store.channels.byId[cid ?? 0]);
+  const channel = useAppSelector((store) => store.channels.byId[cid ?? 0], shallowEqual);
   const { data: SMTPEnabled, isSuccess: smtpStatusFetchSuccess } = useGetSMTPStatusQuery();
   const [generateInviteLink, { data: channelInviteLink, isLoading: generatingChannelLink }] =
     useLazyCreateInviteLinkQuery();
diff --git a/src/hooks/useLeaveChannel.ts b/src/hooks/useLeaveChannel.ts
index 189d1568..424af2b1 100644
--- a/src/hooks/useLeaveChannel.ts
+++ b/src/hooks/useLeaveChannel.ts
@@ -1,10 +1,10 @@
 import { useLazyLeaveChannelQuery, useUpdateChannelMutation } from "@/app/services/channel";
 import { useAppSelector } from "@/app/store";
+import { shallowEqual } from "react-redux";
 
 export default function useLeaveChannel(cid: number) {
-  const { channel, loginUid } = useAppSelector((store) => {
-    return { channel: store.channels.byId[cid], loginUid: store.authData.user?.uid };
-  });
+  const loginUid = useAppSelector((store) => store.authData.user?.uid, shallowEqual);
+  const channel = useAppSelector((store) => store.channels.byId[cid], shallowEqual);
   const [update, { isLoading: transferring, isSuccess: transferSuccess }] =
     useUpdateChannelMutation();
   const [leave, { isLoading: leaving, isSuccess: leaveSuccess }] = useLazyLeaveChannelQuery();
diff --git a/src/hooks/useLicense.ts b/src/hooks/useLicense.ts
index e8b18581..6f59541c 100644
--- a/src/hooks/useLicense.ts
+++ b/src/hooks/useLicense.ts
@@ -6,18 +6,15 @@ import {
   useUpsertLicenseMutation
 } from "@/app/services/server";
 import { useAppSelector } from "@/app/store";
+import { shallowEqual } from "react-redux";
 
 // type Props = {
 //   refetchOnMountOrArgChange?: boolean
 // } | undefined
 const useLicense = (refetchOnMountOrArgChange = false) => {
-  const { userCount, isGuest, upgraded } = useAppSelector((store) => {
-    return {
-      userCount: store.users.ids.length,
-      isGuest: store.authData.guest,
-      upgraded: store.server.upgraded
-    };
-  });
+  const userCount = useAppSelector((store) => store.users.ids.length, shallowEqual);
+  const upgraded = useAppSelector((store) => store.server.upgraded, shallowEqual);
+  const isGuest = useAppSelector((store) => store.authData.guest, shallowEqual);
   const {
     data: license,
     refetch: refetchLicense,
diff --git a/src/hooks/useNormalizeMessage.ts b/src/hooks/useNormalizeMessage.ts
index 11f32dce..66921fbe 100644
--- a/src/hooks/useNormalizeMessage.ts
+++ b/src/hooks/useNormalizeMessage.ts
@@ -4,9 +4,10 @@ import { useLazyGetArchiveMessageQuery } from "@/app/services/message";
 import { useAppSelector } from "@/app/store";
 import { ArchiveMessage } from "@/types/resource";
 import { normalizeArchiveData } from "../utils";
+import { shallowEqual } from "react-redux";
 
 export default function useNormalizeMessage(filePath: string | null) {
-  const archiveData = useAppSelector((store) => store.archiveMessage[filePath ?? ""]);
+  const archiveData = useAppSelector((store) => store.archiveMessage[filePath ?? ""], shallowEqual);
   const [normalizedMessages, setNormalizedMessages] = useState<ArchiveMessage[] | null>(null);
   const [getArchiveMessage, { isError, isLoading, isSuccess }] = useLazyGetArchiveMessageQuery();
   useEffect(() => {
diff --git a/src/hooks/usePinMessage.ts b/src/hooks/usePinMessage.ts
index 5771d693..1e033697 100644
--- a/src/hooks/usePinMessage.ts
+++ b/src/hooks/usePinMessage.ts
@@ -3,15 +3,12 @@ import { useEffect, useState } from "react";
 import { usePinMessageMutation, useUnpinMessageMutation } from "@/app/services/message";
 import { useAppSelector } from "@/app/store";
 import { PinnedMessage } from "@/types/channel";
+import { shallowEqual } from "react-redux";
 
 export default function usePinMessage(cid: number) {
   const [pins, setPins] = useState<PinnedMessage[]>([]);
-  const { channel, loginUser } = useAppSelector((store) => {
-    return {
-      channel: store.channels.byId[cid],
-      loginUser: store.authData.user
-    };
-  });
+  const loginUser = useAppSelector((store) => store.authData.user, shallowEqual);
+  const channel = useAppSelector((store) => store.channels.byId[cid], shallowEqual);
   const [pin, { isError, isLoading, isSuccess }] = usePinMessageMutation();
   const [unpin, { isError: isUnpinError, isLoading: isUnpinning, isSuccess: isUnpinSuccess }] =
     useUnpinMessageMutation();
diff --git a/src/hooks/usePreload.ts b/src/hooks/usePreload.ts
index f93014b1..21e36abe 100644
--- a/src/hooks/usePreload.ts
+++ b/src/hooks/usePreload.ts
@@ -7,33 +7,27 @@ import { useLazyGetContactsQuery, useLazyGetUsersQuery } from "@/app/services/us
 import { useAppSelector } from "@/app/store";
 import useLicense from "./useLicense";
 import useStreaming from "./useStreaming";
+import { shallowEqual } from "react-redux";
 
 let preloadChannelMsgs = false;
 export default function usePreload() {
   const { isLoading: loadingLicense } = useLicense(false);
   const [preloadChannelMessages] = useLazyLoadMoreMessagesQuery();
   const { rehydrate, rehydrated } = useRehydrate();
-  const {
-    ready,
-    loginUid,
-    token,
-    isGuest,
-    expireTime = +new Date(),
-    channelMessageData,
-    channelIds,
-    enableContacts
-  } = useAppSelector((store) => {
-    return {
-      ready: store.ui.ready,
-      channelIds: store.channels.ids,
-      channelMessageData: store.channelMessage,
-      loginUid: store.authData.user?.uid,
-      isGuest: store.authData.guest,
-      token: store.authData.token,
-      expireTime: store.authData.expireTime,
-      enableContacts: store.server.contact_verification_enable
-    };
-  });
+  const ready = useAppSelector((store) => store.ui.ready, shallowEqual);
+  const loginUid = useAppSelector((store) => store.authData.user?.uid, shallowEqual);
+  const enableContacts = useAppSelector(
+    (store) => store.server.contact_verification_enable,
+    shallowEqual
+  );
+  const expireTime = useAppSelector(
+    (store) => store.authData.expireTime ?? +new Date(),
+    shallowEqual
+  );
+  const channelIds = useAppSelector((store) => store.channels.ids, shallowEqual);
+  const token = useAppSelector((store) => store.authData.token, shallowEqual);
+  const isGuest = useAppSelector((store) => store.authData.guest, shallowEqual);
+  const channelMessageData = useAppSelector((store) => store.channelMessage, shallowEqual);
   const { startStreaming } = useStreaming();
   const [
     getFavorites,
diff --git a/src/hooks/useSendMessage.ts b/src/hooks/useSendMessage.ts
index aba5747c..07c1e269 100644
--- a/src/hooks/useSendMessage.ts
+++ b/src/hooks/useSendMessage.ts
@@ -7,6 +7,7 @@ import { addReplyingMessage, MessagePayload, removeReplyingMessage } from "@/app
 import { useAppDispatch, useAppSelector } from "@/app/store";
 import { ChatContext } from "@/types/common";
 import { ContentTypeKey } from "@/types/message";
+import { shallowEqual } from "react-redux";
 
 interface Props {
   context: ChatContext;
@@ -27,7 +28,10 @@ type SendMessageDTO = { type: ContentTypeKey } & Partial<MessagePayload> & {
 const useSendMessage = (props?: Props) => {
   const { context = "dm", from = 0, to = 0 } = props || {};
   const dispatch = useAppDispatch();
-  const stageFiles = useAppSelector((store) => store.ui.uploadFiles[`${context}_${to}`] || []);
+  const stageFiles = useAppSelector(
+    (store) => store.ui.uploadFiles[`${context}_${to}`] || [],
+    shallowEqual
+  );
   const [replyMessage, { isError: replyErr, isLoading: replying, isSuccess: replySuccess }] =
     useReplyMessageMutation();
   const [
diff --git a/src/hooks/useStreaming/index.ts b/src/hooks/useStreaming/index.ts
index 57b50fde..1a50362e 100644
--- a/src/hooks/useStreaming/index.ts
+++ b/src/hooks/useStreaming/index.ts
@@ -45,6 +45,7 @@ import {
 } from "@/types/sse";
 import { getLocalAuthData } from "@/utils";
 import chatMessageHandler from "./chat.handler";
+import { shallowEqual } from "react-redux";
 
 const getQueryString = (params: { [key: string]: string }) => {
   const sp = new URLSearchParams();
@@ -62,10 +63,12 @@ let aliveInter: number | ReturnType<typeof setTimeout> = 0;
 
 export default function useStreaming() {
   const [renewToken] = useRenewMutation();
-  const {
-    authData: { user, guest },
-    footprint: { afterMid, usersVersion, readUsers, readChannels }
-  } = useAppSelector((store) => store);
+  const user = useAppSelector((store) => store.authData.user, shallowEqual);
+  const guest = useAppSelector((store) => store.authData.guest, shallowEqual);
+  const afterMid = useAppSelector((store) => store.footprint.afterMid, shallowEqual);
+  const usersVersion = useAppSelector((store) => store.footprint.usersVersion, shallowEqual);
+  const readUsers = useAppSelector((store) => store.footprint.readUsers, shallowEqual);
+  const readChannels = useAppSelector((store) => store.footprint.readChannels, shallowEqual);
   const dispatch = useAppDispatch();
   const loginUid = user?.uid || 0;
 
diff --git a/src/hooks/useUploadFile.ts b/src/hooks/useUploadFile.ts
index 8dc8763d..73f411a2 100644
--- a/src/hooks/useUploadFile.ts
+++ b/src/hooks/useUploadFile.ts
@@ -9,6 +9,7 @@ import { useAppDispatch, useAppSelector } from "@/app/store";
 import { Message } from "@/types/channel";
 import { ChatContext } from "@/types/common";
 import { UploadFileResponse } from "@/types/message";
+import { shallowEqual } from "react-redux";
 
 export type UploadFileData = {
   name: string;
@@ -35,12 +36,14 @@ const convertHeic2Jpg = async (file: { name: string; type: string; size: number;
 const useUploadFile = (props?: IProps) => {
   const { context, id } = props ? props : { context: "channel", id: 0 };
   const dispatch = useAppDispatch();
-  const { stageFiles, replying } = useAppSelector((store) => {
-    return {
-      stageFiles: store.ui.uploadFiles[`${context}_${id}`] || [],
-      replying: store.message.replying[`${context}_${id}`]
-    };
-  });
+  const stageFiles = useAppSelector(
+    (store) => store.ui.uploadFiles[`${context}_${id}`] || [],
+    shallowEqual
+  );
+  const replying = useAppSelector(
+    (store) => store.message.replying[`${context}_${id}`],
+    shallowEqual
+  );
   const [data, setData] = useState<Message | null>(null);
   const canceledRef = useRef(false);
   const sliceUploadedCountRef = useRef(0);
diff --git a/src/hooks/useUserOperation.ts b/src/hooks/useUserOperation.ts
index f77c1b99..687890f1 100644
--- a/src/hooks/useUserOperation.ts
+++ b/src/hooks/useUserOperation.ts
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
-import { useDispatch } from "react-redux";
+import { shallowEqual, useDispatch } from "react-redux";
 // import { ContentTypes } from "@/app/config";
 import { useMatch, useNavigate } from "react-router-dom";
 import { hideAll } from "tippy.js";
@@ -39,13 +39,15 @@ const useUserOperation = ({ uid, cid }: IProps) => {
   const [removeInChannel, { isSuccess: removeSuccess }] = useRemoveMembersMutation();
   const navigateTo = useNavigate();
   const { copy } = useCopy();
-  const { user, channel, loginUser } = useAppSelector((store) => {
-    return {
-      user: typeof uid !== "undefined" ? store.users.byId[uid] : uid,
-      channel: typeof cid !== "undefined" ? store.channels.byId[cid] : cid,
-      loginUser: store.authData.user
-    };
-  });
+  const user = useAppSelector(
+    (store) => (typeof uid !== "undefined" ? store.users.byId[uid] : undefined),
+    shallowEqual
+  );
+  const channel = useAppSelector(
+    (store) => (typeof cid !== "undefined" ? store.channels.byId[cid] : undefined),
+    shallowEqual
+  );
+  const loginUser = useAppSelector((store) => store.authData.user, shallowEqual);
 
   useEffect(() => {
     setPassedUid(uid ?? loginUser?.uid);
diff --git a/src/routes/chat/ChannelChat/index.tsx b/src/routes/chat/ChannelChat/index.tsx
index 89377c28..338a67da 100644
--- a/src/routes/chat/ChannelChat/index.tsx
+++ b/src/routes/chat/ChannelChat/index.tsx
@@ -1,6 +1,6 @@
 import { memo, useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { useDispatch } from "react-redux";
+import { shallowEqual, useDispatch } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import Tippy from "@tippyjs/react";
 
@@ -29,15 +29,10 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
   const { pathname } = useLocation();
   const navigate = useNavigate();
   const dispatch = useDispatch();
-
-  const { userIds, data, loginUser, visibleAside } = useAppSelector((store) => {
-    return {
-      loginUser: store.authData.user,
-      userIds: store.users.ids,
-      data: store.channels.byId[cid],
-      visibleAside: store.footprint.channelAsides[cid]
-    };
-  });
+  const loginUser = useAppSelector((store) => store.authData.user, shallowEqual);
+  const visibleAside = useAppSelector((store) => store.footprint.channelAsides[cid], shallowEqual);
+  const userIds = useAppSelector((store) => store.users.ids, shallowEqual);
+  const data = useAppSelector((store) => store.channels.byId[cid], shallowEqual);
   useEffect(() => {
     if (!data) {
       // channel不存在了 回首页
diff --git a/src/routes/chat/DMChat/index.tsx b/src/routes/chat/DMChat/index.tsx
index 809c4522..47e5ffc4 100644
--- a/src/routes/chat/DMChat/index.tsx
+++ b/src/routes/chat/DMChat/index.tsx
@@ -10,6 +10,7 @@ import FavIcon from "@/assets/icons/bookmark.svg";
 import FavList from "../FavList";
 import Layout from "../Layout";
 import VoiceChat from "../VoiceChat";
+import { shallowEqual } from "react-redux";
 
 type Props = {
   uid: number;
@@ -17,11 +18,7 @@ type Props = {
 };
 const DMChat: FC<Props> = ({ uid = 0, dropFiles }) => {
   const navigate = useNavigate();
-  const { currUser } = useAppSelector((store) => {
-    return {
-      currUser: store.users.byId[uid]
-    };
-  });
+  const currUser = useAppSelector((store) => store.users.byId[uid], shallowEqual);
   useEffect(() => {
     if (!currUser) {
       // user不存在了 回首页
diff --git a/src/routes/chat/GuestBlankPlaceholder.tsx b/src/routes/chat/GuestBlankPlaceholder.tsx
index 8fd6e6ad..cd0fb253 100644
--- a/src/routes/chat/GuestBlankPlaceholder.tsx
+++ b/src/routes/chat/GuestBlankPlaceholder.tsx
@@ -1,6 +1,6 @@
 // import React from "react";
 import { useTranslation } from "react-i18next";
-import { useDispatch } from "react-redux";
+import { shallowEqual, useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
 
 import { BASE_ORIGIN } from "@/app/config";
@@ -17,7 +17,7 @@ const GuestBlankPlaceholder = () => {
   const dispatch = useDispatch();
   const { clearLocalData } = useLogout();
   const navigateTo = useNavigate();
-  const serverName = useAppSelector((store) => store.server.name);
+  const serverName = useAppSelector((store) => store.server.name, shallowEqual);
   const handleSignIn = () => {
     dispatch(resetAuthData());
     clearLocalData();
diff --git a/src/routes/chat/GuestChannelChat/index.tsx b/src/routes/chat/GuestChannelChat/index.tsx
index e34dffa2..0728d364 100644
--- a/src/routes/chat/GuestChannelChat/index.tsx
+++ b/src/routes/chat/GuestChannelChat/index.tsx
@@ -5,17 +5,14 @@ import { useAppSelector } from "@/app/store";
 import ChannelIcon from "@/components/ChannelIcon";
 import GoBackNav from "@/components/GoBackNav";
 import Layout from "../Layout";
+import { shallowEqual } from "react-redux";
 
 type Props = {
   cid?: number;
 };
 export default function GuestChannelChat({ cid = 0 }: Props) {
   // const { t } = useTranslation("chat");
-  const { data } = useAppSelector((store) => {
-    return {
-      data: store.channels.byId[cid]
-    };
-  });
+  const data = useAppSelector((store) => store.channels.byId[cid], shallowEqual);
   if (!data) return null;
   const { name, description, is_public } = data;
   return (
diff --git a/src/routes/chat/GuestSessionList/Session.tsx b/src/routes/chat/GuestSessionList/Session.tsx
index 2e441ea2..eb011586 100644
--- a/src/routes/chat/GuestSessionList/Session.tsx
+++ b/src/routes/chat/GuestSessionList/Session.tsx
@@ -7,6 +7,7 @@ import { useAppSelector } from "@/app/store";
 import Avatar from "@/components/Avatar";
 import { fromNowTime } from "@/utils";
 import { renderPreviewMessage } from "../../chat/utils";
+import { shallowEqual } from "react-redux";
 
 interface IProps {
   id: number;
@@ -19,13 +20,9 @@ const Session: FC<IProps> = ({ id, mid }) => {
     mid: number;
     is_public: boolean;
   }>();
-  const { messageData, userData, channelData } = useAppSelector((store) => {
-    return {
-      messageData: store.message,
-      userData: store.users.byId,
-      channelData: store.channels.byId
-    };
-  });
+  const messageData = useAppSelector((store) => store.message, shallowEqual);
+  const userData = useAppSelector((store) => store.users.byId, shallowEqual);
+  const channelData = useAppSelector((store) => store.channels.byId, shallowEqual);
 
   useEffect(() => {
     const tmp = channelData[id];
diff --git a/src/routes/chat/GuestSessionList/index.tsx b/src/routes/chat/GuestSessionList/index.tsx
index 2cbfd4b7..b3c1c37a 100644
--- a/src/routes/chat/GuestSessionList/index.tsx
+++ b/src/routes/chat/GuestSessionList/index.tsx
@@ -3,6 +3,7 @@ import { FC, useEffect, useState } from "react";
 import { useAppSelector } from "@/app/store";
 import LoginTip from "../Layout/LoginTip";
 import Session from "./Session";
+import { shallowEqual } from "react-redux";
 
 export interface ChatSession {
   key: string;
@@ -12,17 +13,12 @@ export interface ChatSession {
 type Props = {};
 const SessionList: FC<Props> = () => {
   const [sessions, setSessions] = useState<ChatSession[]>([]);
-  const { channelIDs, readChannels, readUsers, channelMessage, userMessage, loginUid } =
-    useAppSelector((store) => {
-      return {
-        loginUid: store.authData.user?.uid,
-        channelIDs: store.channels.ids,
-        userMessage: store.userMessage.byId,
-        channelMessage: store.channelMessage,
-        readChannels: store.footprint.readChannels,
-        readUsers: store.footprint.readUsers
-      };
-    });
+  const readChannels = useAppSelector((store) => store.footprint.readChannels, shallowEqual);
+  const readUsers = useAppSelector((store) => store.footprint.readUsers, shallowEqual);
+  const loginUid = useAppSelector((store) => store.authData.user?.uid, shallowEqual);
+  const channelIDs = useAppSelector((store) => store.channels.ids, shallowEqual);
+  const channelMessage = useAppSelector((store) => store.channelMessage, shallowEqual);
+  const userMessage = useAppSelector((store) => store.userMessage.byId, shallowEqual);
 
   useEffect(() => {
     const cSessions = channelIDs.map((id) => {
diff --git a/src/routes/chat/Layout/AddContactTip.tsx b/src/routes/chat/Layout/AddContactTip.tsx
index 1b77e48c..10b6f65b 100644
--- a/src/routes/chat/Layout/AddContactTip.tsx
+++ b/src/routes/chat/Layout/AddContactTip.tsx
@@ -5,6 +5,7 @@ import IconBlock from "@/assets/icons/block.svg";
 import { useUpdateContactStatusMutation } from "../../../app/services/user";
 import { useAppSelector } from "../../../app/store";
 import { ContactAction } from "../../../types/user";
+import { shallowEqual } from "react-redux";
 
 type Props = {
   uid: number;
@@ -13,12 +14,11 @@ type Props = {
 const AddContactTip = (props: Props) => {
   const { t } = useTranslation("chat");
   const [updateContactStatus] = useUpdateContactStatusMutation();
-  const { targetUser, enableContact } = useAppSelector((store) => {
-    return {
-      targetUser: store.users.byId[props.uid],
-      enableContact: store.server.contact_verification_enable
-    };
-  });
+  const enableContact = useAppSelector(
+    (store) => store.server.contact_verification_enable,
+    shallowEqual
+  );
+  const targetUser = useAppSelector((store) => store.users.byId[props.uid], shallowEqual);
   const handleContactStatus = (action: ContactAction) => {
     updateContactStatus({ target_uid: props.uid, action });
   };
diff --git a/src/routes/chat/Layout/DMVoicing.tsx b/src/routes/chat/Layout/DMVoicing.tsx
index de338a1b..adc3587f 100644
--- a/src/routes/chat/Layout/DMVoicing.tsx
+++ b/src/routes/chat/Layout/DMVoicing.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { useDispatch } from "react-redux";
+import { shallowEqual, useDispatch } from "react-redux";
 import clsx from "clsx";
 
 import { updateCallInfo } from "@/app/slices/voice";
@@ -114,17 +114,12 @@ type Props = {
 const DMVoice = ({ uid }: Props) => {
   const dispatch = useDispatch();
   // const { t } = useTranslation("chat");
-  const {
-    voice: { callingFrom, callingTo, voicingMembers },
-    userData,
-    loginUser
-  } = useAppSelector((store) => {
-    return {
-      voice: store.voice,
-      userData: store.users.byId,
-      loginUser: store.authData.user
-    };
-  });
+  const loginUid = useAppSelector((store) => store.authData.user?.uid, shallowEqual);
+  const userData = useAppSelector((store) => store.users.byId, shallowEqual);
+  const { callingFrom, callingTo, voicingMembers } = useAppSelector(
+    (store) => store.voice,
+    shallowEqual
+  );
   const { leave, joinVoice, joining } = useVoice({ id: callingTo, context: "dm" });
   useEffect(() => {
     const ids = voicingMembers.ids;
@@ -136,7 +131,7 @@ const DMVoice = ({ uid }: Props) => {
 
   const { name: fromUsername, avatar: fromAvatar } = userData[callingFrom];
   const { name: toUsername, avatar: toAvatar, uid: toUid } = userData[callingTo];
-  const sendByMe = loginUser?.uid !== toUid;
+  const sendByMe = loginUid !== toUid;
   const onlyToSelf = voicingMembers.ids.length == 1 && voicingMembers.ids[0] == callingTo;
   const handleCancel = () => {
     console.log("cancel");
diff --git a/src/routes/chat/Layout/NewMessageBottomTip.tsx b/src/routes/chat/Layout/NewMessageBottomTip.tsx
index bfcac7fe..971a38b5 100644
--- a/src/routes/chat/Layout/NewMessageBottomTip.tsx
+++ b/src/routes/chat/Layout/NewMessageBottomTip.tsx
@@ -6,6 +6,7 @@ import { useAppSelector } from "../../../app/store";
 import { ChatContext } from "../../../types/common";
 import getUnreadCount from "../utils";
 import { memo } from "react";
+import { shallowEqual } from "react-redux";
 
 type Props = {
   context: ChatContext;
@@ -15,17 +16,17 @@ type Props = {
 // linear-gradient(135deg,_#3C8CE7_0%,_#00EAFF_100%)
 const NewMessageBottomTip = ({ context, id, scrollToBottom }: Props) => {
   const { t } = useTranslation("chat");
-  const { readIndex, mids, messageData, loginUid } = useAppSelector((store) => {
-    return {
-      readIndex:
-        context == "channel" ? store.footprint.readChannels[id] : store.footprint.readUsers[id],
-      mids: context == "dm" ? store.userMessage.byId[id] : store.channelMessage[id],
-      selects: store.ui.selectMessages[`${context}_${id}`],
-      loginUid: store.authData.user?.uid ?? 0,
-      data: context == "channel" ? store.channels.byId[id] : undefined,
-      messageData: store.message || {}
-    };
-  });
+  const readIndex = useAppSelector(
+    (store) =>
+      context == "channel" ? store.footprint.readChannels[id] : store.footprint.readUsers[id],
+    shallowEqual
+  );
+  const mids = useAppSelector(
+    (store) => (context == "dm" ? store.userMessage.byId[id] : store.channelMessage[id]),
+    shallowEqual
+  );
+  const loginUid = useAppSelector((store) => store.authData.user?.uid ?? 0, shallowEqual);
+  const messageData = useAppSelector((store) => store.message ?? {}, shallowEqual);
   const { unreads = 0 } = getUnreadCount({
     mids,
     readIndex,
diff --git a/src/routes/chat/Layout/Operations.tsx b/src/routes/chat/Layout/Operations.tsx
index 5b61b852..4f3094b0 100644
--- a/src/routes/chat/Layout/Operations.tsx
+++ b/src/routes/chat/Layout/Operations.tsx
@@ -13,6 +13,7 @@ import IconBookmark from "@/assets/icons/bookmark.svg";
 import IconClose from "@/assets/icons/close.circle.svg";
 import IconDelete from "@/assets/icons/delete.svg";
 import IconForward from "@/assets/icons/forward.svg";
+import { shallowEqual } from "react-redux";
 
 type Props = {
   context: ChatContext;
@@ -22,7 +23,7 @@ const Operations: FC<Props> = ({ context, id }) => {
   const [deleteModalVisible, setDeleteModalVisible] = useState(false);
   const { canDelete } = useDeleteMessage();
   const { addFavorite } = useFavMessage({});
-  const mids = useAppSelector((store) => store.ui.selectMessages[`${context}_${id}`]);
+  const mids = useAppSelector((store) => store.ui.selectMessages[`${context}_${id}`], shallowEqual);
   const [forwardModalVisible, setForwardModalVisible] = useState(false);
   const dispatch = useAppDispatch();
 
diff --git a/src/routes/chat/Layout/VirtualMessageFeed/CustomHeader.tsx b/src/routes/chat/Layout/VirtualMessageFeed/CustomHeader.tsx
index 90e3ccf6..e6a511c2 100644
--- a/src/routes/chat/Layout/VirtualMessageFeed/CustomHeader.tsx
+++ b/src/routes/chat/Layout/VirtualMessageFeed/CustomHeader.tsx
@@ -5,6 +5,7 @@ import clsx from "clsx";
 
 import { useAppSelector } from "@/app/store";
 import EditIcon from "@/assets/icons/edit.svg";
+import { shallowEqual } from "react-redux";
 
 type ChannelHeaderProps = {
   cid: number;
@@ -12,19 +13,15 @@ type ChannelHeaderProps = {
 const ChannelHeader = ({ cid }: ChannelHeaderProps) => {
   const { pathname } = useLocation();
   const { t } = useTranslation("chat");
-  const { data, loginUser } = useAppSelector((store) => {
-    return {
-      loginUser: store.authData.user,
-      data: store.channels.byId[cid]
-    };
-  });
+  const isAdmin = useAppSelector((store) => store.authData.user?.is_admin, shallowEqual);
+  const data = useAppSelector((store) => store.channels.byId[cid], shallowEqual);
   return (
     <div className="pt-14 px-1 md:px-0 flex flex-col items-start gap-2">
       <h2 className="font-bold text-4xl dark:text-white">
         {t("welcome_channel", { name: data?.name })}
       </h2>
       <p className="text-gray-600 dark:text-gray-300">{t("welcome_desc", { name: data?.name })} </p>
-      {loginUser?.is_admin && (
+      {isAdmin && (
         <NavLink
           to={`/setting/channel/${cid}/overview?f=${pathname}`}
           className="flex items-center gap-1 bg-clip-text text-fill-transparent bg-gradient-to-r from-blue-500 to-primary-400 "
diff --git a/src/routes/chat/Layout/VirtualMessageFeed/index.tsx b/src/routes/chat/Layout/VirtualMessageFeed/index.tsx
index 7d601158..30aeec79 100644
--- a/src/routes/chat/Layout/VirtualMessageFeed/index.tsx
+++ b/src/routes/chat/Layout/VirtualMessageFeed/index.tsx
@@ -1,8 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { useDispatch } from "react-redux";
+import { shallowEqual, useDispatch } from "react-redux";
 import { Virtuoso, VirtuosoHandle } from "react-virtuoso";
-// import clsx from 'clsx';
-// import { useTranslation } from 'react-i18next';
 import { useDebounce } from "rooks";
 
 import { useLazyLoadMoreMessagesQuery, useReadMessageMutation } from "@/app/services/message";
@@ -30,24 +28,26 @@ const VirtualMessageFeed = ({ context, id }: Props) => {
   const vList = useRef<VirtuosoHandle | null>(null);
   const [updateReadIndex] = useReadMessageMutation();
   const updateReadDebounced = useDebounce(updateReadIndex, 300);
-  const {
-    historyMid = "",
-    mids = [],
-    selects,
-    messageData,
-    loginUser,
-    footprint
-  } = useAppSelector((store) => {
-    return {
-      historyMid:
-        context == "dm" ? store.footprint.historyUsers[id] : store.footprint.historyChannels[id],
-      mids: context == "dm" ? store.userMessage.byId[id] : store.channelMessage[id],
-      selects: store.ui.selectMessages[`${context}_${id}`],
-      footprint: store.footprint,
-      loginUser: store.authData.user,
-      messageData: store.message || {}
-    };
-  });
+  const historyMid = useAppSelector(
+    (store) =>
+      context == "dm"
+        ? store.footprint.historyUsers[id] ?? ""
+        : store.footprint.historyChannels[id] ?? "",
+    shallowEqual
+  );
+  const mids = useAppSelector(
+    (store) =>
+      context == "dm" ? store.userMessage.byId[id] ?? [] : store.channelMessage[id] ?? [],
+    shallowEqual
+  );
+  const selects = useAppSelector(
+    (store) => store.ui.selectMessages[`${context}_${id}`],
+    shallowEqual
+  );
+  const messageData = useAppSelector((store) => store.message || {}, shallowEqual);
+  const loginUid = useAppSelector((store) => store.authData.user?.uid, shallowEqual);
+  const readChannels = useAppSelector((store) => store.footprint.readChannels, shallowEqual);
+  const readUsers = useAppSelector((store) => store.footprint.readUsers, shallowEqual);
 
   useEffect(() => {
     if (isSuccess && historyData) {
@@ -102,7 +102,7 @@ const VirtualMessageFeed = ({ context, id }: Props) => {
   const handleBottomStateChange = (bottom: boolean) => {
     setAtBottom(bottom);
   };
-  const readIndex = context == "channel" ? footprint.readChannels[id] : footprint.readUsers[id];
+  const readIndex = context == "channel" ? readChannels[id] : readUsers[id];
   return (
     <>
       <Virtuoso
@@ -132,7 +132,7 @@ const VirtualMessageFeed = ({ context, id }: Props) => {
           if (!curr) return <div className="w-full h-[1px] invisible"></div>;
           const isFirst = idx == 0;
           const prev = isFirst ? null : messageData[mids[idx - 1]];
-          const read = curr?.from_uid == loginUser?.uid || mid <= readIndex;
+          const read = curr?.from_uid == loginUid || mid <= readIndex;
           return renderMessageFragment({
             selectMode: !!selects,
             updateReadIndex: updateReadDebounced,
diff --git a/src/routes/chat/Layout/index.tsx b/src/routes/chat/Layout/index.tsx
index b997c28a..84e4a321 100644
--- a/src/routes/chat/Layout/index.tsx
+++ b/src/routes/chat/Layout/index.tsx
@@ -19,6 +19,7 @@ import LoginTip from "./LoginTip";
 import Operations from "./Operations";
 import VirtualMessageFeed from "./VirtualMessageFeed";
 import { platform } from "@/utils";
+import { shallowEqual } from "react-redux";
 
 interface Props {
   readonly?: boolean;
@@ -45,15 +46,13 @@ const Layout: FC<Props> = ({
   const { reachLimit } = useLicense();
   const { addStageFile } = useUploadFile({ context, id: to });
   const messagesContainer = useRef<HTMLDivElement>(null);
-
-  const { selects, channelsData, usersData, inputMode } = useAppSelector((store) => {
-    return {
-      inputMode: store.ui.inputMode,
-      selects: store.ui.selectMessages[`${context}_${to}`],
-      channelsData: store.channels.byId,
-      usersData: store.users.byId
-    };
-  });
+  const inputMode = useAppSelector((store) => store.ui.inputMode, shallowEqual);
+  const selects = useAppSelector(
+    (store) => store.ui.selectMessages[`${context}_${to}`],
+    shallowEqual
+  );
+  const channelsData = useAppSelector((store) => store.channels.byId, shallowEqual);
+  const usersData = useAppSelector((store) => store.users.byId, shallowEqual);
   const [{ isActive }, drop] = useDrop(
     () => ({
       accept: [NativeTypes.FILE],
diff --git a/src/routes/chat/RTCWidget.tsx b/src/routes/chat/RTCWidget.tsx
index a1d06c34..8b350264 100644
--- a/src/routes/chat/RTCWidget.tsx
+++ b/src/routes/chat/RTCWidget.tsx
@@ -15,6 +15,7 @@ import Tooltip from "../../components/Tooltip";
 import User from "../../components/User";
 import { useVoice } from "../../components/Voice";
 import { ChatContext } from "../../types/common";
+import { shallowEqual } from "react-redux";
 
 type Props = {
   id: number;
@@ -34,15 +35,11 @@ const RTCWidget = ({ id, context = "channel" }: Props) => {
     startShareScreen,
     stopShareScreen
   } = useVoice({ context, id });
-  const { callFrom, callTo, loginUser, channelData, userData } = useAppSelector((store) => {
-    return {
-      callFrom: store.voice.callingFrom,
-      callTo: store.voice.callingTo,
-      userData: store.users.byId,
-      channelData: store.channels.byId,
-      loginUser: store.authData.user
-    };
-  });
+  const loginUser = useAppSelector((store) => store.authData.user, shallowEqual);
+  const callFrom = useAppSelector((store) => store.voice.callingFrom, shallowEqual);
+  const callTo = useAppSelector((store) => store.voice.callingTo, shallowEqual);
+  const channelData = useAppSelector((store) => store.channels.byId, shallowEqual);
+  const userData = useAppSelector((store) => store.channels.byId, shallowEqual);
   if (!loginUser || !voicingInfo || joining) return null;
   // const name = voicingInfo.context == "channel" ? channelData[voicingInfo.id]?.name : userData[voicingInfo.id]?.name;
   // if (!name) return null;
diff --git a/src/routes/chat/SessionList/ContextMenu.tsx b/src/routes/chat/SessionList/ContextMenu.tsx
index eebfcdd8..e8a8f9c8 100644
--- a/src/routes/chat/SessionList/ContextMenu.tsx
+++ b/src/routes/chat/SessionList/ContextMenu.tsx
@@ -1,6 +1,6 @@
 import { FC, ReactElement } from "react";
 import { useTranslation } from "react-i18next";
-import { useDispatch } from "react-redux";
+import { shallowEqual, useDispatch } from "react-redux";
 import { useLocation, useMatch, useNavigate } from "react-router-dom";
 import Tippy from "@tippyjs/react";
 
@@ -51,11 +51,10 @@ const SessionContextMenu: FC<Props> = ({
   const dispatch = useDispatch();
   const navigateTo = useNavigate();
   const { pathname } = useLocation();
-  const { channelMuted } = useAppSelector((store) => {
-    return {
-      channelMuted: context == "channel" ? store.footprint.muteChannels[id] : false
-    };
-  });
+  const channelMuted = useAppSelector(
+    (store) => (context == "channel" ? store.footprint.muteChannels[id] : false),
+    shallowEqual
+  );
 
   const handleChannelSetting = () => {
     navigateTo(`/setting/channel/${id}/overview?f=${pathname}`);
diff --git a/src/routes/chat/SessionList/Session.tsx b/src/routes/chat/SessionList/Session.tsx
index 91b15a2b..ad159dcd 100644
--- a/src/routes/chat/SessionList/Session.tsx
+++ b/src/routes/chat/SessionList/Session.tsx
@@ -17,6 +17,7 @@ import IconMute from "@/assets/icons/mute.svg";
 import IconVoicing from "@/assets/icons/voicing.svg";
 import getUnreadCount, { renderPreviewMessage } from "../utils";
 import ContextMenu from "./ContextMenu";
+import { shallowEqual } from "react-redux";
 
 interface IProps {
   type?: ChatContext;
@@ -67,31 +68,25 @@ const Session: FC<IProps> = ({
     mid: number;
     is_public: boolean;
   }>();
-  const {
-    callingFrom,
-    callingTo,
-    messageData,
-    userData,
-    channelData,
-    readIndex,
-    loginUid,
-    mids,
-    muted,
-    voiceList
-  } = useAppSelector((store) => {
-    return {
-      callingFrom: store.voice.callingFrom,
-      callingTo: store.voice.callingTo,
-      voiceList: store.voice.list,
-      mids: type == "dm" ? store.userMessage.byId[id] : store.channelMessage[id],
-      loginUid: store.authData.user?.uid || 0,
-      readIndex: type == "dm" ? store.footprint.readUsers[id] : store.footprint.readChannels[id],
-      messageData: store.message,
-      userData: store.users.byId,
-      channelData: store.channels.byId,
-      muted: type == "dm" ? store.footprint.muteUsers[id] : store.footprint.muteChannels[id]
-    };
-  });
+  const loginUid = useAppSelector((store) => store.authData.user?.uid || 0, shallowEqual);
+  const callingFrom = useAppSelector((store) => store.voice.callingFrom, shallowEqual);
+  const callingTo = useAppSelector((store) => store.voice.callingTo, shallowEqual);
+  const voiceList = useAppSelector((store) => store.voice.list, shallowEqual);
+  const mids = useAppSelector(
+    (store) => (type == "dm" ? store.userMessage.byId[id] : store.channelMessage[id]),
+    shallowEqual
+  );
+  const muted = useAppSelector(
+    (store) => (type == "dm" ? store.footprint.muteUsers[id] : store.footprint.muteChannels[id]),
+    shallowEqual
+  );
+  const readIndex = useAppSelector(
+    (store) => (type == "dm" ? store.footprint.readUsers[id] : store.footprint.readChannels[id]),
+    shallowEqual
+  );
+  const messageData = useAppSelector((store) => store.message, shallowEqual);
+  const userData = useAppSelector((store) => store.users.byId, shallowEqual);
+  const channelData = useAppSelector((store) => store.channels.byId, shallowEqual);
 
   useEffect(() => {
     const tmp = type == "dm" ? userData[id] : channelData[id];
diff --git a/src/routes/chat/SessionList/index.tsx b/src/routes/chat/SessionList/index.tsx
index e2affbdc..57bc6963 100644
--- a/src/routes/chat/SessionList/index.tsx
+++ b/src/routes/chat/SessionList/index.tsx
@@ -7,6 +7,7 @@ import { PinChatTargetChannel, PinChatTargetUser } from "@/types/sse";
 import InviteModal from "@/components/InviteModal";
 import DeleteChannelConfirmModal from "../../settingChannel/DeleteConfirmModal";
 import Session from "./Session";
+import { shallowEqual } from "react-redux";
 
 export interface ChatSession {
   type: ChatContext;
@@ -23,19 +24,14 @@ const SessionList: FC<Props> = ({ tempSession }) => {
   const [inviteChannelId, setInviteChannelId] = useState<number>();
   const [sessions, setSessions] = useState<ChatSession[]>([]);
   const [pinSessions, setPinSessions] = useState<ChatSession[]>([]);
-  const { pins, channelIDs, DMs, readChannels, readUsers, channelMessage, userMessage, loginUid } =
-    useAppSelector((store) => {
-      return {
-        pins: store.footprint.pinChats,
-        loginUid: store.authData.user?.uid,
-        channelIDs: store.channels.ids,
-        DMs: store.userMessage.ids,
-        userMessage: store.userMessage.byId,
-        channelMessage: store.channelMessage,
-        readChannels: store.footprint.readChannels,
-        readUsers: store.footprint.readUsers
-      };
-    });
+  const readChannels = useAppSelector((store) => store.footprint.readChannels, shallowEqual);
+  const readUsers = useAppSelector((store) => store.footprint.readUsers, shallowEqual);
+  const loginUid = useAppSelector((store) => store.authData.user?.uid, shallowEqual);
+  const channelIDs = useAppSelector((store) => store.channels.ids, shallowEqual);
+  const DMs = useAppSelector((store) => store.userMessage.ids, shallowEqual);
+  const pins = useAppSelector((store) => store.footprint.pinChats, shallowEqual);
+  const userMessage = useAppSelector((store) => store.userMessage.byId, shallowEqual);
+  const channelMessage = useAppSelector((store) => store.channelMessage, shallowEqual);
 
   useEffect(() => {
     // const pinDMs=
diff --git a/src/routes/chat/VoiceChat/VoiceManagement.tsx b/src/routes/chat/VoiceChat/VoiceManagement.tsx
index c5999a9a..c897e178 100644
--- a/src/routes/chat/VoiceChat/VoiceManagement.tsx
+++ b/src/routes/chat/VoiceChat/VoiceManagement.tsx
@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { useDispatch } from "react-redux";
+import { shallowEqual, useDispatch } from "react-redux";
 import clsx from "clsx";
 
 import { updateChannelVisibleAside } from "@/app/slices/footprint";
@@ -21,12 +21,8 @@ type Props = {
 
 const VoiceManagement = ({ id, context, info }: Props) => {
   const dispatch = useDispatch();
-  const { userData, voicingMembers } = useAppSelector((store) => {
-    return {
-      userData: store.users.byId,
-      voicingMembers: store.voice.voicingMembers
-    };
-  });
+  const userMap = useAppSelector((store) => store.users.byId, shallowEqual);
+  const voicingMembers = useAppSelector((store) => store.voice.voicingMembers, shallowEqual);
   useEffect(() => {
     const ids = voicingMembers.ids;
     ids.forEach((id) => {
@@ -66,7 +62,7 @@ const VoiceManagement = ({ id, context, info }: Props) => {
     <div className="w-full h-full py-2 flex flex-col">
       <ul className="flex grow flex-col">
         {members.map((uid) => {
-          const curr = userData[uid];
+          const curr = userMap[uid];
           if (!curr) return null;
           const { muted, speakingVolume = 0 } = membersData[uid];
           const speaking = speakingVolume > 50;
diff --git a/src/routes/chat/VoiceChat/index.tsx b/src/routes/chat/VoiceChat/index.tsx
index 685ec08d..b5db47e6 100644
--- a/src/routes/chat/VoiceChat/index.tsx
+++ b/src/routes/chat/VoiceChat/index.tsx
@@ -1,9 +1,6 @@
-// import React from 'react';
-// import Tippy from '@tippyjs/react';
-// import { useState } from 'react';
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
-import { useDispatch } from "react-redux";
+import { shallowEqual, useDispatch } from "react-redux";
 
 import { useGetAgoraStatusQuery } from "@/app/services/server";
 import { updateChannelVisibleAside, updateDMVisibleAside } from "@/app/slices/footprint";
@@ -23,14 +20,12 @@ const isIframe = isInIframe();
 const VoiceChat = ({ id, context = "channel" }: Props) => {
   const { joinVoice, joined, joining = false, joinedAtThisContext } = useVoice({ id, context });
   const dispatch = useDispatch();
-  const { loginUser, voiceList, visibleAside } = useAppSelector((store) => {
-    return {
-      loginUser: store.authData.user,
-      contextData: context == "channel" ? store.channels.byId[id] : store.users.byId[id],
-      voiceList: store.voice.list,
-      visibleAside: context == "channel" ? store.footprint.channelAsides[id] : null
-    };
-  });
+  const loginUid = useAppSelector((store) => store.authData.user?.uid ?? 0, shallowEqual);
+  const visibleAside = useAppSelector(
+    (store) => (context == "channel" ? store.footprint.channelAsides[id] : null),
+    shallowEqual
+  );
+  const voiceList = useAppSelector((store) => store.voice.list, shallowEqual);
   const { data: enabled } = useGetAgoraStatusQuery();
   const { t } = useTranslation("chat");
   const toggleDashboard = () => {
@@ -53,14 +48,14 @@ const VoiceChat = ({ id, context = "channel" }: Props) => {
     dispatch(context == "channel" ? updateChannelVisibleAside(data) : updateDMVisibleAside(data));
     // 实时显示calling box
     if (!joinedAtThisContext && context == "dm") {
-      dispatch(updateCallInfo({ from: loginUser?.uid ?? 0, to: id, calling: false }));
+      dispatch(updateCallInfo({ from: loginUid, to: id, calling: false }));
     }
   };
   const handleInIframe = () => {
     // todo
     toast.error("Voice is not supported in iframe");
   };
-  if (!loginUser || !enabled) return null;
+  if (loginUid == 0 || !enabled) return null;
   const visible = visibleAside == "voice";
   const memberCount = voiceList.find((v) => v.context == context && v.id == id)?.memberCount ?? 0;
   const badgeClass = `absolute -top-2 -right-2 w-4 h-4 rounded-full bg-primary-400 text-white `;
diff --git a/src/routes/chat/VoiceFullscreen.tsx b/src/routes/chat/VoiceFullscreen.tsx
index 8e33657b..f4f766a1 100644
--- a/src/routes/chat/VoiceFullscreen.tsx
+++ b/src/routes/chat/VoiceFullscreen.tsx
@@ -1,5 +1,5 @@
 import { MouseEvent, useEffect, useState } from "react";
-import { useDispatch } from "react-redux";
+import { shallowEqual, useDispatch } from "react-redux";
 import clsx from "clsx";
 
 import Operations from "@/components/Voice/Operations";
@@ -21,13 +21,12 @@ type Props = {
 const VoiceFullscreen = ({ id, context }: Props) => {
   const dispatch = useDispatch();
   const [speakingUid, setSpeakingUid] = useState(0);
-  const { name, userData, voicingMembers } = useAppSelector((store) => {
-    return {
-      userData: store.users.byId,
-      voicingMembers: store.voice.voicingMembers,
-      name: context == "channel" ? store.channels.byId[id].name : store.users.byId[id].name
-    };
-  });
+  const name = useAppSelector(
+    (store) => (context == "channel" ? store.channels.byId[id].name : store.users.byId[id].name),
+    shallowEqual
+  );
+  const userData = useAppSelector((store) => store.users.byId, shallowEqual);
+  const voicingMembers = useAppSelector((store) => store.voice.voicingMembers, shallowEqual);
   useEffect(() => {
     const ids = voicingMembers.ids;
     ids.forEach((id) => {
diff --git a/src/routes/chat/index.tsx b/src/routes/chat/index.tsx
index 19710595..92d9edab 100644
--- a/src/routes/chat/index.tsx
+++ b/src/routes/chat/index.tsx
@@ -16,6 +16,7 @@ import GuestSessionList from "./GuestSessionList";
 import RTCWidget from "./RTCWidget";
 import SessionList from "./SessionList";
 import VoiceFullscreen from "./VoiceFullscreen";
+import { shallowEqual } from "react-redux";
 
 function ChatPage() {
   const isHomePath = useMatch(`/`);
@@ -24,21 +25,16 @@ function ChatPage() {
   const [channelModalVisible, setChannelModalVisible] = useState(false);
   const [usersModalVisible, setUsersModalVisible] = useState(false);
   const { channel_id = 0, user_id = 0 } = useParams();
-  const {
-    sessionUids,
-    isGuest,
-    aside = "",
-    callingTo
-  } = useAppSelector((store) => {
-    return {
-      callingTo: store.voice.callingTo,
-      isGuest: store.authData.guest,
-      sessionUids: store.userMessage.ids,
-      aside: channel_id
+  const callingTo = useAppSelector((store) => store.voice.callingTo, shallowEqual);
+  const aside = useAppSelector(
+    (store) =>
+      channel_id
         ? store.footprint.channelAsides[+channel_id]
-        : store.footprint.dmAsides[store.voice.callingTo]
-    };
-  });
+        : store.footprint.dmAsides[store.voice.callingTo],
+    shallowEqual
+  );
+  const isGuest = useAppSelector((store) => store.authData.guest, shallowEqual);
+  const sessionUids = useAppSelector((store) => store.userMessage.ids, shallowEqual);
   const toggleUsersModalVisible = () => {
     setUsersModalVisible((prev) => !prev);
   };
diff --git a/src/routes/chat/utils.tsx b/src/routes/chat/utils.tsx
index 95a08ed0..d863f378 100644
--- a/src/routes/chat/utils.tsx
+++ b/src/routes/chat/utils.tsx
@@ -1,5 +1,5 @@
 // import React from "react";
-import { useDispatch } from "react-redux";
+import { shallowEqual, useDispatch } from "react-redux";
 import dayjs from "dayjs";
 
 import { ContentTypes } from "@/app/config";
@@ -97,7 +97,10 @@ export const renderPreviewMessage = (message = null) => {
 const MessageWrapper = ({ selectMode = false, context, id, mid, divider, children, ...rest }) => {
   const dispatch = useDispatch();
 
-  const selects = useAppSelector((store) => store.ui.selectMessages[`${context}_${id}`]);
+  const selects = useAppSelector(
+    (store) => store.ui.selectMessages[`${context}_${id}`],
+    shallowEqual
+  );
   const selected = !!(selects && selects.find((s) => s == mid));
   const toggleSelect = () => {
     const operation = selected ? "remove" : "add";
diff --git a/src/routes/favs/index.tsx b/src/routes/favs/index.tsx
index cebc1ab4..97d0a847 100644
--- a/src/routes/favs/index.tsx
+++ b/src/routes/favs/index.tsx
@@ -14,6 +14,7 @@ import IconAudio from "@/assets/icons/file.audio.svg";
 import IconImage from "@/assets/icons/file.image.svg";
 import IconUnknown from "@/assets/icons/file.unknown.svg";
 import IconVideo from "@/assets/icons/file.video.svg";
+import { shallowEqual } from "react-redux";
 
 type filter = "audio" | "video" | "image" | "";
 
@@ -44,13 +45,9 @@ function FavsPage() {
       filter: "audio"
     }
   ];
-  const { favorites, channelData, userData } = useAppSelector((store) => {
-    return {
-      favorites: store.favorites,
-      userData: store.users.byId,
-      channelData: store.channels.byId
-    };
-  });
+  const favorites = useAppSelector((store) => store.favorites, shallowEqual);
+  const channelData = useAppSelector((store) => store.channels.byId, shallowEqual);
+  const userData = useAppSelector((store) => store.users.byId, shallowEqual);
   const handleFilter = (ftr: filter) => {
     setFilter(ftr);
   };
diff --git a/src/routes/files/Filter/index.tsx b/src/routes/files/Filter/index.tsx
index 1ce3af1c..c2382501 100644
--- a/src/routes/files/Filter/index.tsx
+++ b/src/routes/files/Filter/index.tsx
@@ -10,6 +10,7 @@ import FilterChannel from "./Channel";
 import FilterDate, { Dates } from "./Date";
 import FilterFrom from "./From";
 import FilterType, { FileTypes } from "./Type";
+import { shallowEqual } from "react-redux";
 
 const getClass = (selected: boolean) => {
   return clsx(
@@ -42,9 +43,8 @@ export default function Filter({ filter, updateFilter }) {
     };
     toggleFilterVisible(tmp);
   };
-  const { userMap, channelMap } = useAppSelector((store) => {
-    return { userMap: store.users.byId, channelMap: store.channels.byId };
-  });
+  const userMap = useAppSelector((store) => store.users.byId, shallowEqual);
+  const channelMap = useAppSelector((store) => store.channels.byId, shallowEqual);
 
   const { from, channel, type, date } = filter;
   const {
diff --git a/src/routes/files/index.tsx b/src/routes/files/index.tsx
index 11226a1b..cc577379 100644
--- a/src/routes/files/index.tsx
+++ b/src/routes/files/index.tsx
@@ -9,6 +9,7 @@ import Filter from "./Filter";
 import Search from "./Search";
 import View from "./View";
 import { useLazyGetFilesQuery } from "@/app/services/server";
+import { shallowEqual } from "react-redux";
 
 const checkFilter = (data, filter, channelMessage) => {
   let selected = true;
@@ -35,11 +36,7 @@ function Files() {
   const [getFiles, { data }] = useLazyGetFilesQuery();
   const listContainerRef = useRef<HTMLDivElement>();
   const [filter, setFilter] = useState({});
-  const { view } = useAppSelector((store) => {
-    return {
-      view: store.ui.fileListView
-    };
-  });
+  const view = useAppSelector((store) => store.ui.fileListView.view, shallowEqual);
 
   const updateFilter = (data) => {
     setFilter((prev) => {
diff --git a/src/routes/guest.tsx b/src/routes/guest.tsx
index 9203fc42..2c53c0f5 100644
--- a/src/routes/guest.tsx
+++ b/src/routes/guest.tsx
@@ -4,12 +4,14 @@ import { Navigate } from "react-router-dom";
 import { useLazyGuestLoginQuery } from "../app/services/auth";
 import { useAppSelector } from "../app/store";
 import { useEffect } from "react";
+import { shallowEqual } from "react-redux";
 
 // type Props = {};
 
 const GuestLogin = () => {
   const [guestLogin] = useLazyGuestLoginQuery();
-  const { token, guest } = useAppSelector((store) => store.authData);
+  const token = useAppSelector((store) => store.authData.token, shallowEqual);
+  const guest = useAppSelector((store) => store.authData.guest, shallowEqual);
   useEffect(() => {
     if (!guest || !token) {
       guestLogin();
diff --git a/src/routes/home/MobileNavs.tsx b/src/routes/home/MobileNavs.tsx
index 5d938790..cbdd90b1 100644
--- a/src/routes/home/MobileNavs.tsx
+++ b/src/routes/home/MobileNavs.tsx
@@ -6,6 +6,7 @@ import ChatIcon from "@/assets/icons/chat.svg";
 import SettingIcon from "@/assets/icons/setting.svg";
 import UserIcon from "@/assets/icons/user.svg";
 import { useAppSelector } from "../../app/store";
+import { shallowEqual } from "react-redux";
 
 // type Props = {}
 
@@ -16,17 +17,10 @@ const MobileNavs = () => {
   const isDMChat = useMatch(`/chat/dm/:user_id`);
   // const isSettingPage = useMatch(`/setting`);
   const isChannelChat = useMatch(`/chat/channel/:channel_id`);
-  const {
-    ui: {
-      rememberedNavs: { chat: chatPath, user: userPath }
-    }
-  } = useAppSelector((store) => {
-    return {
-      ui: store.ui,
-      loginUid: store.authData.user?.uid,
-      guest: store.authData.guest
-    };
-  });
+  const { chat: chatPath, user: userPath } = useAppSelector(
+    (store) => store.ui.rememberedNavs,
+    shallowEqual
+  );
 
   const linkClass = `flex`;
   const isChatPage = isHomePath || pathname.startsWith("/chat");
diff --git a/src/routes/home/User.tsx b/src/routes/home/User.tsx
index 1d6f3fed..a266c647 100644
--- a/src/routes/home/User.tsx
+++ b/src/routes/home/User.tsx
@@ -3,6 +3,7 @@ import { NavLink, useLocation } from "react-router-dom";
 
 import { useAppSelector } from "@/app/store";
 import Avatar from "@/components/Avatar";
+import { shallowEqual } from "react-redux";
 
 interface Props {
   uid: number;
@@ -10,7 +11,7 @@ interface Props {
 
 const User: FC<Props> = ({ uid }) => {
   const { pathname } = useLocation();
-  const user = useAppSelector((store) => store.users.byId[uid]);
+  const user = useAppSelector((store) => store.users.byId[uid], shallowEqual);
   if (!user) return null;
 
   return (
diff --git a/src/routes/home/index.tsx b/src/routes/home/index.tsx
index c12dfed6..c5f7b680 100644
--- a/src/routes/home/index.tsx
+++ b/src/routes/home/index.tsx
@@ -1,6 +1,6 @@
 import { memo, useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { useDispatch } from "react-redux";
+import { shallowEqual, useDispatch } from "react-redux";
 import { NavLink, Outlet, useLocation, useMatch } from "react-router-dom";
 
 import { updateRememberedNavs } from "@/app/slices/ui";
@@ -28,21 +28,13 @@ function HomePage() {
   const isHomePath = useMatch(`/`);
   const isChatHomePath = useMatch(`/chat`);
   const { pathname } = useLocation();
-  const {
-    roleChanged,
-    loginUser: { uid: loginUid },
-    guest,
-    ui: {
-      rememberedNavs: { chat: chatPath, user: userPath }
-    }
-  } = useAppSelector((store) => {
-    return {
-      ui: store.ui,
-      loginUser: store.authData.user ?? { uid: 0, is_admin: false },
-      guest: store.authData.guest,
-      roleChanged: store.authData.roleChanged
-    };
-  });
+  const roleChanged = useAppSelector((store) => store.authData.roleChanged, shallowEqual);
+  const guest = useAppSelector((store) => store.authData.guest, shallowEqual);
+  const loginUid = useAppSelector((store) => store.authData.user?.uid ?? 0, shallowEqual);
+  const { chat: chatPath, user: userPath } = useAppSelector(
+    (store) => store.ui.rememberedNavs,
+    shallowEqual
+  );
   // preload basic data
   const { success } = usePreload();
   useEffect(() => {
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index d2142d18..0b676873 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,6 +1,6 @@
-import { lazy, useEffect } from "react";
+import { lazy, memo, useEffect } from "react";
 import toast from "react-hot-toast";
-import { Provider } from "react-redux";
+import { Provider, shallowEqual } from "react-redux";
 import { HashRouter, Route, Routes } from "react-router-dom";
 import { isEqual } from "lodash";
 
@@ -40,12 +40,8 @@ const HomePage = lazy(() => import("./home"));
 
 let toastId: string;
 const PageRoutes = () => {
-  const {
-    ui: { online },
-    version
-  } = useAppSelector((store) => {
-    return { ui: store.ui, version: store.server.version };
-  }, isEqual);
+  const version = useAppSelector((store) => store.server.version, shallowEqual);
+  const online = useAppSelector((store) => store.ui.online, shallowEqual);
   // 提前获取device token
   useDeviceToken(vapidKey);
   // 初始化元信息
@@ -296,7 +292,7 @@ const PageRoutes = () => {
   );
 };
 
-export default function ReduxRoutes() {
+function ReduxRoutes() {
   return (
     <Provider store={store}>
       {isElectronContext() && <Electron />}
@@ -305,3 +301,4 @@ export default function ReduxRoutes() {
     </Provider>
   );
 }
+export default memo(ReduxRoutes);
diff --git a/src/routes/invitePrivate/index.tsx b/src/routes/invitePrivate/index.tsx
index f632c441..717fcbd8 100644
--- a/src/routes/invitePrivate/index.tsx
+++ b/src/routes/invitePrivate/index.tsx
@@ -5,10 +5,11 @@ import { useCheckMagicTokenValidMutation } from "../../app/services/auth";
 import { useJoinPrivateChannelMutation, useLazyGetChannelQuery } from "../../app/services/channel";
 import { useAppSelector } from "../../app/store";
 import StyledButton from "../../components/styled/Button";
+import { shallowEqual } from "react-redux";
 
 const InvitePrivate = () => {
   const { channel_id } = useParams();
-  const server = useAppSelector((store) => store.server);
+  const server = useAppSelector((store) => store.server, shallowEqual);
   const navigateTo = useNavigate();
   const [joinChannel, { isLoading, data, isSuccess }] = useJoinPrivateChannelMutation();
   const [fetchChannelInfo, { data: channel, isSuccess: fetchChannelSuccess }] =
diff --git a/src/routes/login/index.tsx b/src/routes/login/index.tsx
index 5cc1e97e..e13de2e4 100644
--- a/src/routes/login/index.tsx
+++ b/src/routes/login/index.tsx
@@ -16,13 +16,14 @@ import IconBack from "@/assets/icons/arrow.left.svg";
 import MagicLinkLogin from "./MagicLinkLogin";
 import SignUpLink from "./SignUpLink";
 import SocialLoginButtons from "./SocialLoginButtons";
+import { shallowEqual } from "react-redux";
 
 const defaultInput = {
   email: "",
   password: ""
 };
 export default function LoginPage() {
-  const { name: serverName, logo } = useAppSelector((store) => store.server);
+  const { name: serverName, logo } = useAppSelector((store) => store.server, shallowEqual);
   const { t } = useTranslation("auth");
   const { t: ct } = useTranslation();
   const { data: enableSMTP, isLoading: loadingSMTPStatus } = useGetSMTPStatusQuery();
diff --git a/src/routes/onboarding/steps/admin-account.tsx b/src/routes/onboarding/steps/admin-account.tsx
index fc44ef9d..514eaf7d 100644
--- a/src/routes/onboarding/steps/admin-account.tsx
+++ b/src/routes/onboarding/steps/admin-account.tsx
@@ -1,7 +1,7 @@
 import { FC, useEffect, useRef, useState } from "react";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
-import { useDispatch } from "react-redux";
+import { shallowEqual, useDispatch } from "react-redux";
 import { useWizard } from "react-use-wizard";
 
 import { useLoginMutation } from "@/app/services/auth";
@@ -18,7 +18,7 @@ const AdminAccount: FC<Props> = ({ serverName }) => {
   const { t } = useTranslation("welcome", { keyPrefix: "onboarding" });
   const { nextStep } = useWizard();
   const formRef = useRef<HTMLFormElement | undefined>();
-  const loggedIn = useAppSelector((store) => !!store.authData.token);
+  const loggedIn = useAppSelector((store) => !!store.authData.token, shallowEqual);
   const dispatch = useDispatch();
   const [createAdmin, { isLoading: isSigningUp, isError: signUpError, isSuccess: signUpOk }] =
     useCreateAdminMutation();
diff --git a/src/routes/reg/Register.tsx b/src/routes/reg/Register.tsx
index 2ed495af..b670bd01 100644
--- a/src/routes/reg/Register.tsx
+++ b/src/routes/reg/Register.tsx
@@ -1,7 +1,7 @@
 import { ChangeEvent, FormEvent, useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
-import { useDispatch } from "react-redux";
+import { shallowEqual, useDispatch } from "react-redux";
 import { useNavigate, useSearchParams } from "react-router-dom";
 
 import BASE_URL, { KEY_LOCAL_MAGIC_TOKEN } from "@/app/config";
@@ -32,7 +32,7 @@ interface AuthForm {
 export default function Register() {
   let [searchParams] = useSearchParams(new URLSearchParams(location.search));
   const ctx = searchParams.get("ctx");
-  const serverName = useAppSelector((store) => store.server.name);
+  const serverName = useAppSelector((store) => store.server.name, shallowEqual);
   const { t } = useTranslation("auth");
   const { t: ct } = useTranslation();
   const [sendRegMagicLink, { isLoading: signingUp, data, isSuccess }] =
diff --git a/src/routes/resources/Filter/index.tsx b/src/routes/resources/Filter/index.tsx
index 1ce3af1c..7cf26ac8 100644
--- a/src/routes/resources/Filter/index.tsx
+++ b/src/routes/resources/Filter/index.tsx
@@ -42,9 +42,8 @@ export default function Filter({ filter, updateFilter }) {
     };
     toggleFilterVisible(tmp);
   };
-  const { userMap, channelMap } = useAppSelector((store) => {
-    return { userMap: store.users.byId, channelMap: store.channels.byId };
-  });
+  const userMap = useAppSelector((store) => store.users.byId, shallowEqual);
+  const channelMap = useAppSelector((store) => store.channels.byId, shallowEqual);
 
   const { from, channel, type, date } = filter;
   const {
diff --git a/src/routes/resources/index.tsx b/src/routes/resources/index.tsx
index 45053924..77be87fe 100644
--- a/src/routes/resources/index.tsx
+++ b/src/routes/resources/index.tsx
@@ -9,6 +9,7 @@ import useExpiredResMap from "@/hooks/useExpiredResMap";
 import Filter from "./Filter";
 import Search from "./Search";
 import View from "./View";
+import { shallowEqual } from "react-redux";
 
 const checkFilter = (data, filter, channelMessage) => {
   let selected = true;
@@ -36,14 +37,10 @@ function ResourceManagement() {
   const { isExpired } = useExpiredResMap();
   const listContainerRef = useRef<HTMLDivElement>();
   const [filter, setFilter] = useState({});
-  const { message, view, channelMessage, fileMsgs } = useAppSelector((store) => {
-    return {
-      fileMsgs: store.fileMessage,
-      message: store.message,
-      channelMessage: store.channelMessage,
-      view: store.ui.fileListView
-    };
-  });
+  const view = useAppSelector((store) => store.ui.fileListView.view, shallowEqual);
+  const message = useAppSelector((store) => store.message, shallowEqual);
+  const fileMsgs = useAppSelector((store) => store.fileMessage, shallowEqual);
+  const channelMessage = useAppSelector((store) => store.channelMessage, shallowEqual);
 
   const updateFilter = (data) => {
     setFilter((prev) => {
diff --git a/src/routes/setting/APIDocument.tsx b/src/routes/setting/APIDocument.tsx
index a9d677a1..728294d8 100644
--- a/src/routes/setting/APIDocument.tsx
+++ b/src/routes/setting/APIDocument.tsx
@@ -4,11 +4,12 @@ import { useTranslation } from "react-i18next";
 import IconCopy from "@/assets/icons/copy.svg";
 import { useAppSelector } from "../../app/store";
 import useCopy from "../../hooks/useCopy";
+import { shallowEqual } from "react-redux";
 
 // type Props = {}
 const APIUrl = `${location.origin}/api/swagger`;
 const APIDocument = () => {
-  const token = useAppSelector((store) => store.authData.token);
+  const token = useAppSelector((store) => store.authData.token, shallowEqual);
   const { copy } = useCopy();
   const { t } = useTranslation("setting");
   const handleCopy = () => {
diff --git a/src/routes/setting/BotConfig/index.tsx b/src/routes/setting/BotConfig/index.tsx
index 0b3aeddf..b81d46ea 100644
--- a/src/routes/setting/BotConfig/index.tsx
+++ b/src/routes/setting/BotConfig/index.tsx
@@ -13,6 +13,7 @@ import DeleteModal from "./DeleteModal";
 import NameEdit from "./NameEdit";
 import WebhookEdit from "./WebhookEdit";
 import WebhookModal from "./WebhookModal";
+import { shallowEqual } from "react-redux";
 
 type TipProps = { title: string; desc: string };
 const Tip = ({ title, desc }: TipProps) => {
@@ -33,7 +34,10 @@ export default function BotConfig() {
   const [createModalVisible, setCreateModalVisible] = useState(false);
   const [currWebhookParams, setCurrWebhookParams] = useState<WebhookParams | undefined>(undefined);
   const [currDeleteParams, setCurrDeleteParams] = useState<DeleteParams | undefined>(undefined);
-  const bots = useAppSelector((store) => Object.values(store.users.byId).filter((u) => !!u.is_bot));
+  const bots = useAppSelector(
+    (store) => Object.values(store.users.byId).filter((u) => !!u.is_bot),
+    shallowEqual
+  );
   const { t } = useTranslation("setting", { keyPrefix: "bot" });
   const { t: ct } = useTranslation();
 
diff --git a/src/routes/setting/DataManagement/AutoDeleteFiles.tsx b/src/routes/setting/DataManagement/AutoDeleteFiles.tsx
index 30d7bcae..24ac9365 100644
--- a/src/routes/setting/DataManagement/AutoDeleteFiles.tsx
+++ b/src/routes/setting/DataManagement/AutoDeleteFiles.tsx
@@ -11,13 +11,17 @@ import SettingBlock from "@/components/SettingBlock";
 import Button from "@/components/styled/Button";
 import StyledModal from "@/components/styled/Modal";
 import StyledRadio from "@/components/styled/Radio";
+import { shallowEqual } from "react-redux";
 
 // type Props = {
 //   updateConfirmModal: (context: VisibleModalType | null) => void;
 // };
 
 const AutoDeleteFiles = () => {
-  const currStatus = useAppSelector((store) => store.server.max_file_expiry_mode ?? "Off");
+  const currStatus = useAppSelector(
+    (store) => store.server.max_file_expiry_mode ?? "Off",
+    shallowEqual
+  );
   const { t } = useTranslation("setting", { keyPrefix: "data.auto_delete_file" });
   const { t: ct } = useTranslation();
   const { refetch } = useGetSystemCommonQuery();
diff --git a/src/routes/setting/MyAccount.tsx b/src/routes/setting/MyAccount.tsx
index cb1a4fbc..075d0b5e 100644
--- a/src/routes/setting/MyAccount.tsx
+++ b/src/routes/setting/MyAccount.tsx
@@ -9,6 +9,7 @@ import Button from "@/components/styled/Button";
 import ProfileBasicEditModal from "./ProfileBasicEditModal";
 import RemoveAccountConfirmModal from "./RemoveAccountConfirmModal";
 import UpdatePasswordModal from "./UpdatePasswordModal";
+import { shallowEqual } from "react-redux";
 
 type EditField = "name" | "email" | "";
 export default function MyAccount() {
@@ -31,9 +32,10 @@ export default function MyAccount() {
     }
   };
 
-  const loginUser = useAppSelector((store) => {
-    return store.users.byId[store.authData.user?.uid || 0];
-  });
+  const loginUser = useAppSelector(
+    (store) => store.users.byId[store.authData.user?.uid || 0],
+    shallowEqual
+  );
 
   useEffect(() => {
     if (uploadSuccess) {
diff --git a/src/routes/setting/Overview/ChatLayout.tsx b/src/routes/setting/Overview/ChatLayout.tsx
index 13d88827..702c1dd6 100644
--- a/src/routes/setting/Overview/ChatLayout.tsx
+++ b/src/routes/setting/Overview/ChatLayout.tsx
@@ -11,11 +11,15 @@ import {
 } from "../../../app/services/server";
 import { useAppSelector } from "../../../app/store";
 import { ChatLayout } from "../../../types/server";
+import { shallowEqual } from "react-redux";
 
 // type Props = {}
 
 const Index = () => {
-  const currStatus = useAppSelector((store) => store.server.chat_layout_mode ?? "Left");
+  const currStatus = useAppSelector(
+    (store) => store.server.chat_layout_mode ?? "Left",
+    shallowEqual
+  );
   const { t } = useTranslation("setting", { keyPrefix: "overview.chat_layout" });
   const { t: ct } = useTranslation();
   const { refetch } = useGetSystemCommonQuery();
diff --git a/src/routes/setting/Overview/ContactVerification.tsx b/src/routes/setting/Overview/ContactVerification.tsx
index 7f1bd190..61924d24 100644
--- a/src/routes/setting/Overview/ContactVerification.tsx
+++ b/src/routes/setting/Overview/ContactVerification.tsx
@@ -10,11 +10,15 @@ import {
   useUpdateSystemCommonMutation
 } from "../../../app/services/server";
 import { useAppSelector } from "../../../app/store";
+import { shallowEqual } from "react-redux";
 
 // type Props = {}
 
 const Index = () => {
-  const currStatus = useAppSelector((store) => !!store.server.contact_verification_enable);
+  const currStatus = useAppSelector(
+    (store) => !!store.server.contact_verification_enable,
+    shallowEqual
+  );
   const { t } = useTranslation("setting", { keyPrefix: "overview.contact_verify" });
   const { t: ct } = useTranslation();
   const { refetch } = useGetSystemCommonQuery();
diff --git a/src/routes/setting/Overview/OnlineStatus.tsx b/src/routes/setting/Overview/OnlineStatus.tsx
index 890ee6ed..6b4e265c 100644
--- a/src/routes/setting/Overview/OnlineStatus.tsx
+++ b/src/routes/setting/Overview/OnlineStatus.tsx
@@ -10,11 +10,15 @@ import {
   useUpdateSystemCommonMutation
 } from "../../../app/services/server";
 import { useAppSelector } from "../../../app/store";
+import { shallowEqual } from "react-redux";
 
 // type Props = {}
 
 const Index = () => {
-  const currStatus = useAppSelector((store) => !!store.server.show_user_online_status);
+  const currStatus = useAppSelector(
+    (store) => !!store.server.show_user_online_status,
+    shallowEqual
+  );
   const { t } = useTranslation("setting", { keyPrefix: "overview.online_status" });
   const { t: ct } = useTranslation();
   const { refetch } = useGetSystemCommonQuery();
diff --git a/src/routes/setting/Overview/Server.tsx b/src/routes/setting/Overview/Server.tsx
index e2f3e5df..60586f69 100644
--- a/src/routes/setting/Overview/Server.tsx
+++ b/src/routes/setting/Overview/Server.tsx
@@ -9,13 +9,13 @@ import SaveTip from "@/components/SaveTip";
 import Input from "@/components/styled/Input";
 import Label from "@/components/styled/Label";
 import Textarea from "@/components/styled/Textarea";
+import { shallowEqual } from "react-redux";
 
 const Index = () => {
   const { t } = useTranslation("setting");
   const { t: ct } = useTranslation();
-  const { loginUser, server } = useAppSelector((store) => {
-    return { loginUser: store.authData.user, server: store.server };
-  });
+  const isAdmin = useAppSelector((store) => store.authData.user?.is_admin, shallowEqual);
+  const server = useAppSelector((store) => store.server, shallowEqual);
 
   const [uploadLogo, { isSuccess: uploadSuccess }] = useUpdateLogoMutation();
   const [updateServer] = useUpdateServerMutation();
@@ -58,8 +58,7 @@ const Index = () => {
     }
   }, [server, serverValues]);
   const { name, description, logo } = serverValues;
-  const isAdmin = loginUser?.is_admin;
-  if (!loginUser || !serverValues) return null;
+  if (!serverValues) return null;
   return (
     <>
       <div className="flex gap-4">
diff --git a/src/routes/setting/Overview/index.tsx b/src/routes/setting/Overview/index.tsx
index 405fc33f..77d141cf 100644
--- a/src/routes/setting/Overview/index.tsx
+++ b/src/routes/setting/Overview/index.tsx
@@ -13,12 +13,11 @@ import FrontendURL from "./FrontendURL";
 import Language from "./Language";
 import OnlineStatus from "./OnlineStatus";
 import Server from "./Server";
+import { shallowEqual } from "react-redux";
 
 export default function Overview() {
   const { t } = useTranslation("setting");
-  const { loginUser } = useAppSelector((store) => {
-    return { loginUser: store.authData.user };
-  });
+  const isAdmin = useAppSelector((store) => store.authData.user?.is_admin, shallowEqual);
   const { values: loginConfig, updateConfig: updateLoginConfig } = useConfig("login");
   const handleUpdateWhoCanSignUp = (value: WhoCanSignUp) => {
     updateLoginConfig({ ...loginConfig, who_can_sign_up: value });
@@ -30,7 +29,6 @@ export default function Overview() {
   };
   if (!loginConfig) return null;
   const { who_can_sign_up: whoCanSignUp, guest = false } = loginConfig as LoginConfig;
-  const isAdmin = loginUser?.is_admin;
 
   return (
     <div className="relative w-full md:w-[512px] flex flex-col gap-6">
diff --git a/src/routes/setting/Overview/server.tsx b/src/routes/setting/Overview/server.tsx
index e2f3e5df..60586f69 100644
--- a/src/routes/setting/Overview/server.tsx
+++ b/src/routes/setting/Overview/server.tsx
@@ -9,13 +9,13 @@ import SaveTip from "@/components/SaveTip";
 import Input from "@/components/styled/Input";
 import Label from "@/components/styled/Label";
 import Textarea from "@/components/styled/Textarea";
+import { shallowEqual } from "react-redux";
 
 const Index = () => {
   const { t } = useTranslation("setting");
   const { t: ct } = useTranslation();
-  const { loginUser, server } = useAppSelector((store) => {
-    return { loginUser: store.authData.user, server: store.server };
-  });
+  const isAdmin = useAppSelector((store) => store.authData.user?.is_admin, shallowEqual);
+  const server = useAppSelector((store) => store.server, shallowEqual);
 
   const [uploadLogo, { isSuccess: uploadSuccess }] = useUpdateLogoMutation();
   const [updateServer] = useUpdateServerMutation();
@@ -58,8 +58,7 @@ const Index = () => {
     }
   }, [server, serverValues]);
   const { name, description, logo } = serverValues;
-  const isAdmin = loginUser?.is_admin;
-  if (!loginUser || !serverValues) return null;
+  if (!serverValues) return null;
   return (
     <>
       <div className="flex gap-4">
diff --git a/src/routes/setting/Widget.tsx b/src/routes/setting/Widget.tsx
index 0a5adf8b..4845164f 100644
--- a/src/routes/setting/Widget.tsx
+++ b/src/routes/setting/Widget.tsx
@@ -9,6 +9,7 @@ import { useAppSelector } from "../../app/store";
 import Button from "../../components/styled/Button";
 import Input from "../../components/styled/Input";
 import useCopy from "../../hooks/useCopy";
+import { shallowEqual } from "react-redux";
 
 const Row = ({
   paramKey,
@@ -34,7 +35,7 @@ const Row = ({
   );
 };
 export default function Widget() {
-  const loginUid = useAppSelector((store) => store.authData.user?.uid);
+  const loginUid = useAppSelector((store) => store.authData.user?.uid, shallowEqual);
   const widgetLink = `${location.origin}/widget.html?host=${loginUid}`;
   const { t } = useTranslation("setting", { keyPrefix: "widget" });
   const { t: wt } = useTranslation("widget");
diff --git a/src/routes/setting/navs.tsx b/src/routes/setting/navs.tsx
index 0a7e1be0..8e815371 100644
--- a/src/routes/setting/navs.tsx
+++ b/src/routes/setting/navs.tsx
@@ -15,6 +15,7 @@ import License from "./License";
 import MyAccount from "./MyAccount";
 import Overview from "./Overview";
 import Widget from "./Widget";
+import { shallowEqual } from "react-redux";
 
 const dataManagementNav = {
   name: "data_management",
@@ -96,9 +97,8 @@ const navs = [
 
 const useNavs = () => {
   const { t } = useTranslation("setting");
-  const { loginUser, upgraded } = useAppSelector((store) => {
-    return { loginUser: store.authData.user, upgraded: store.server.upgraded };
-  });
+  const loginUser = useAppSelector((store) => store.authData.user, shallowEqual);
+  const upgraded = useAppSelector((store) => store.server.upgraded, shallowEqual);
   const filteredNavs = loginUser?.is_admin
     ? navs
     : navs
diff --git a/src/routes/settingChannel/Overview.tsx b/src/routes/settingChannel/Overview.tsx
index f8745b23..4440dccb 100644
--- a/src/routes/settingChannel/Overview.tsx
+++ b/src/routes/settingChannel/Overview.tsx
@@ -17,16 +17,13 @@ import Label from "@/components/styled/Label";
 import Radio from "@/components/styled/Radio";
 import Textarea from "@/components/styled/Textarea";
 import IconChannel from "@/assets/icons/channel.svg";
+import { shallowEqual } from "react-redux";
 
 export default function Overview({ id = 0 }) {
   const { t } = useTranslation("setting", { keyPrefix: "channel" });
   const { t: ct } = useTranslation();
-  const { loginUser, channel } = useAppSelector((store) => {
-    return {
-      loginUser: store.authData.user,
-      channel: store.channels.byId[id]
-    };
-  });
+  const loginUser = useAppSelector((store) => store.authData.user, shallowEqual);
+  const channel = useAppSelector((store) => store.channels.byId[id], shallowEqual);
   const { data, refetch } = useGetChannelQuery(id);
   const [changed, setChanged] = useState(false);
   const [values, setValues] = useState<Channel>();
diff --git a/src/routes/settingChannel/index.tsx b/src/routes/settingChannel/index.tsx
index 2fda5926..a682a320 100644
--- a/src/routes/settingChannel/index.tsx
+++ b/src/routes/settingChannel/index.tsx
@@ -7,18 +7,18 @@ import LeaveChannel from "@/components/LeaveChannel";
 import StyledSettingContainer from "@/components/StyledSettingContainer";
 import DeleteConfirmModal from "./DeleteConfirmModal";
 import useNavs from "./navs";
+import { shallowEqual } from "react-redux";
 
 let from: string = "";
 
 export default function ChannelSetting() {
   const { t } = useTranslation("setting");
   const { cid = 0, nav: navKey } = useParams();
-  const { loginUser, channel } = useAppSelector((store) => {
-    return {
-      loginUser: store.authData.user,
-      channel: cid ? store.channels.byId[+cid] : undefined
-    };
-  });
+  const loginUser = useAppSelector((store) => store.authData.user, shallowEqual);
+  const channel = useAppSelector(
+    (store) => (cid ? store.channels.byId[+cid] : undefined),
+    shallowEqual
+  );
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const navs = useNavs(+cid);
diff --git a/src/routes/settingDM/index.tsx b/src/routes/settingDM/index.tsx
index 40cb987e..56ba034f 100644
--- a/src/routes/settingDM/index.tsx
+++ b/src/routes/settingDM/index.tsx
@@ -6,6 +6,7 @@ import { useAppSelector } from "@/app/store";
 import StyledSettingContainer from "@/components/StyledSettingContainer";
 import DeleteConfirmModal from "./DeleteConfirmModal";
 import useNavs from "./navs";
+import { shallowEqual } from "react-redux";
 
 let from: string = "";
 
@@ -13,12 +14,7 @@ export default function DMSetting() {
   // const { t } = useTranslation("setting");
   const { t: ct } = useTranslation();
   const { uid = 0, nav: navKey } = useParams();
-  const { loginUser } = useAppSelector((store) => {
-    return {
-      loginUser: store.authData.user,
-      user: uid ? store.users.byId[+uid] : undefined
-    };
-  });
+  const isAdmin = useAppSelector((store) => store.authData.user?.is_admin, shallowEqual);
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const navs = useNavs(+uid);
@@ -38,7 +34,6 @@ export default function DMSetting() {
   };
   if (!uid) return null;
   const currNav = flattenNavs.find((n) => n.name == navKey);
-  const canDelete = loginUser?.is_admin;
 
   return (
     <>
@@ -49,7 +44,7 @@ export default function DMSetting() {
         title="DM Setting"
         navs={navs}
         dangers={
-          canDelete
+          isAdmin
             ? [
                 {
                   title: ct("action.remove_user"),
diff --git a/src/routes/users/Search.tsx b/src/routes/users/Search.tsx
index 45f1f020..b9b8c794 100644
--- a/src/routes/users/Search.tsx
+++ b/src/routes/users/Search.tsx
@@ -8,6 +8,7 @@ import AddEntriesMenu from "@/components/AddEntriesMenu";
 import Tooltip from "@/components/Tooltip";
 import IconAdd from "@/assets/icons/add.svg";
 import IconSearch from "@/assets/icons/search.svg";
+import { shallowEqual } from "react-redux";
 
 type Props = {
   type?: "users" | "members";
@@ -16,7 +17,10 @@ type Props = {
   updateInput: (input: string) => void;
 };
 const Search: FC<Props> = ({ input, updateInput, openModal, type = "users" }) => {
-  const enableContact = useAppSelector((store) => store.server.contact_verification_enable);
+  const enableContact = useAppSelector(
+    (store) => store.server.contact_verification_enable,
+    shallowEqual
+  );
   const { t } = useTranslation();
   const handleInput = (evt: ChangeEvent<HTMLInputElement>) => {
     updateInput(evt.target.value);
diff --git a/src/widget/Icon.tsx b/src/widget/Icon.tsx
index 679fc44a..fd8f5593 100644
--- a/src/widget/Icon.tsx
+++ b/src/widget/Icon.tsx
@@ -1,4 +1,5 @@
 // import React from "react";
+import { shallowEqual } from "react-redux";
 import { useAppSelector } from "../app/store";
 
 type Props = {
@@ -6,7 +7,7 @@ type Props = {
 };
 
 const Icon = ({ handleClick }: Props) => {
-  const { logo } = useAppSelector((store) => store.server);
+  const logo = useAppSelector((store) => store.server.logo, shallowEqual);
   if (!logo) return null;
   return (
     <button className="rounded-full overflow-hidden" onClick={handleClick}>
diff --git a/src/widget/Popup/Message/index.tsx b/src/widget/Popup/Message/index.tsx
index b488bb76..e339d2b2 100644
--- a/src/widget/Popup/Message/index.tsx
+++ b/src/widget/Popup/Message/index.tsx
@@ -7,6 +7,7 @@ import { useAppSelector } from "../../../app/store";
 import Text from "./Text";
 import Image from "./Image";
 import { ContentType } from "@/types/message";
+import { shallowEqual } from "react-redux";
 
 dayjs.extend(localizedFormat);
 
@@ -32,7 +33,7 @@ const Time = ({ time }: { time: number }) => {
   );
 };
 const Index = (props: IWidgetMessage) => {
-  const { logo } = useAppSelector((store) => store.server);
+  const logo = useAppSelector((store) => store.server.logo, shallowEqual);
   const { host = false, type, content, thumbnail = "", uid, create_time, sending } = props;
   let contentContainer = null;
   console.log("render message", type, content);
diff --git a/src/widget/Popup/MessageFeed.tsx b/src/widget/Popup/MessageFeed.tsx
index 0e8de2bc..0c069322 100644
--- a/src/widget/Popup/MessageFeed.tsx
+++ b/src/widget/Popup/MessageFeed.tsx
@@ -3,6 +3,7 @@ import { memo, useEffect, useRef, useState } from "react";
 
 import { useAppSelector } from "../../app/store";
 import Message from "./Message";
+import { shallowEqual } from "react-redux";
 
 type Props = {
   hostId: number;
@@ -11,9 +12,8 @@ const triggerScrollHeight = 1200;
 const MessageFeed = ({ hostId }: Props) => {
   const firstRender = useRef(true);
   const [hasNewMsg, setHasNewMsg] = useState(false);
-  const { mids, messageMap } = useAppSelector((store) => {
-    return { mids: store.userMessage.byId[hostId], messageMap: store.message };
-  });
+  const mids = useAppSelector((store) => store.userMessage.byId[hostId], shallowEqual);
+  const messageMap = useAppSelector((store) => store.message, shallowEqual);
   console.log("mids", mids, hostId);
   useEffect(() => {
     const container = document.querySelector("#MESSAGE_LIST_CONTAINER");
diff --git a/src/widget/Popup/Welcome.tsx b/src/widget/Popup/Welcome.tsx
index c6329587..b8291007 100644
--- a/src/widget/Popup/Welcome.tsx
+++ b/src/widget/Popup/Welcome.tsx
@@ -4,13 +4,14 @@ import { useTranslation } from "react-i18next";
 import { useAppSelector } from "../../app/store";
 import { useWidget } from "../WidgetContext";
 import Login from "./Login";
+import { shallowEqual } from "react-redux";
 
 type Props = {
   needLogin?: boolean;
 };
 const Index = ({ needLogin = false }: Props) => {
   const { welcome } = useWidget();
-  const { logo } = useAppSelector((store) => store.server);
+  const logo = useAppSelector((store) => store.server.logo, shallowEqual);
   const { t } = useTranslation("widget");
   // console.log("logooo", logo);
   return (
diff --git a/src/widget/Popup/index.tsx b/src/widget/Popup/index.tsx
index 277657f2..12b6f7a4 100644
--- a/src/widget/Popup/index.tsx
+++ b/src/widget/Popup/index.tsx
@@ -10,6 +10,7 @@ import InviteOnlyTip from "./InviteOnlyTip";
 import MessageFeed from "./MessageFeed";
 import MessageInput from "./MessageInput";
 import Welcome from "./Welcome";
+import { shallowEqual } from "react-redux";
 
 type Props = {
   hostId: number;
@@ -20,7 +21,9 @@ const Index = ({ handleClose, hostId }: Props) => {
   const { embed, inviteOnly } = useWidget();
   // 建立SSE连接
   useSSE();
-  const { user: loginUser, token, guest: isGuest } = useAppSelector((store) => store.authData);
+  const loginUser = useAppSelector((store) => store.authData.user, shallowEqual);
+  const token = useAppSelector((store) => store.authData.token, shallowEqual);
+  const isGuest = useAppSelector((store) => store.authData.guest, shallowEqual);
 
   // no token or guest login
   const notLogin = !token || isGuest;
diff --git a/src/widget/WidgetContext.tsx b/src/widget/WidgetContext.tsx
index 53444d7d..2546021e 100644
--- a/src/widget/WidgetContext.tsx
+++ b/src/widget/WidgetContext.tsx
@@ -3,6 +3,7 @@ import { createContext, ReactNode, useContext } from "react";
 import { useGetLoginConfigQuery, useGetServerQuery } from "../app/services/server";
 import { useAppSelector } from "../app/store";
 import { getContrastColor, isInIframe } from "../utils";
+import { shallowEqual } from "react-redux";
 
 const query = new URLSearchParams(location.search);
 const welcome = decodeURIComponent(query.get("welcome") || "");
@@ -26,7 +27,7 @@ const WidgetContext = createContext({
 function WidgetProvider({ children }: { children: ReactNode }) {
   const { isLoading: loadingServerData } = useGetServerQuery();
   const { isLoading: loadingConfig, data: loginConfig } = useGetLoginConfigQuery();
-  const serverData = useAppSelector((store) => store.server);
+  const serverData = useAppSelector((store) => store.server, shallowEqual);
 
   const loading = loadingConfig || loadingServerData;
   // if(loading) return
diff --git a/src/widget/useSSE.ts b/src/widget/useSSE.ts
index 8463124c..7545f4ea 100644
--- a/src/widget/useSSE.ts
+++ b/src/widget/useSSE.ts
@@ -3,19 +3,15 @@ import dayjs from "dayjs";
 
 import useStreaming from "@/hooks/useStreaming";
 import { useAppSelector } from "../app/store";
+import { shallowEqual } from "react-redux";
 
 export default function useSSE() {
-  const {
-    loginUid,
-    token,
-    expireTime = +new Date()
-  } = useAppSelector((store) => {
-    return {
-      loginUid: store.authData.user?.uid,
-      token: store.authData.token,
-      expireTime: store.authData.expireTime
-    };
-  });
+  const loginUid = useAppSelector((store) => store.authData.user?.uid, shallowEqual);
+  const token = useAppSelector((store) => store.authData.token, shallowEqual);
+  const expireTime = useAppSelector(
+    (store) => store.authData.expireTime ?? +new Date(),
+    shallowEqual
+  );
   const { startStreaming } = useStreaming();
 
   const tokenAlmostExpire = dayjs().isAfter(new Date(expireTime - 20 * 1000));