refactor: useSelector

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",

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")}

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:
+  const setting = useAppSelector(
+    (store) =>
       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
-    };
-  });
+    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();
 

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"}

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;

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: "",

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(() => {

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 ({

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(() => {
     // 未登录

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!");

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">

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();

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>

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);

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}`}</>;

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] ?? {};

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 });
   };

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();

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}']`);

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
   );

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);

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
   );

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>}

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,

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;

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 {

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

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);

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 />;

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);

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();
   };

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(() => {

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">

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)

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

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;
 };

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}`);
   };

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;

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;

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 {

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(

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:
+  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",
-      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
-    };
-  });
+    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 () => {

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

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;

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];

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(() => {

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;

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();

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();

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,

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(() => {

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();

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,

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 [

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;
 

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);

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);

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不存在了 回首页

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不存在了 回首页

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();

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 (

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];

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) => {

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 });
   };

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");

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:
+  const readIndex = useAppSelector(
+    (store) =>
       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 || {}
-    };
-  });
+    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,

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();
 

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 "

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,

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],

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;

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}`);

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];

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=

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;

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 `;

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) => {

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);
   };

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";

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);
   };

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 {

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) => {

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();

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");

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 (

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(() => {

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);

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 }] =

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();

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();

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 }] =

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 {

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) => {

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 = () => {

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();
 

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();

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) {

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();

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();

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();