130 lines
4.0 KiB
TypeScript
130 lines
4.0 KiB
TypeScript
import { useWeChatStore } from "@/store/module/weChat/weChat";
|
||
import { useShallow } from "zustand/react/shallow";
|
||
import { useMemo } from "react";
|
||
import type { WeChatState } from "@/store/module/weChat/weChat.data";
|
||
|
||
/**
|
||
* 合并多个 selector，减少重渲染
|
||
* 使用 useShallow 进行 shallow 比较，只有对象属性变化时才触发更新
|
||
* 使用 useMemo 稳定 selector 函数引用
|
||
*/
|
||
export const useWeChatSelectors = () => {
|
||
const selector = useMemo(
|
||
() => (state: WeChatState) => ({
|
||
// 消息相关
|
||
currentMessages: state.currentMessages,
|
||
currentMessagesHasMore: state.currentMessagesHasMore,
|
||
messagesLoading: state.messagesLoading,
|
||
isLoadingData: state.isLoadingData,
|
||
|
||
// 联系人相关
|
||
currentContract: state.currentContract,
|
||
|
||
// UI 状态
|
||
showCheckbox: state.showCheckbox,
|
||
EnterModule: state.EnterModule,
|
||
showChatRecordModel: state.showChatRecordModel,
|
||
|
||
// AI 相关
|
||
isLoadingAiChat: state.isLoadingAiChat,
|
||
quoteMessageContent: state.quoteMessageContent,
|
||
aiQuoteMessageContent: state.aiQuoteMessageContent,
|
||
|
||
// 选中记录
|
||
selectedChatRecords: state.selectedChatRecords,
|
||
}),
|
||
[],
|
||
);
|
||
return useWeChatStore(useShallow(selector));
|
||
};
|
||
|
||
/**
|
||
* 消息相关的 selector
|
||
* 使用 useShallow 进行 shallow 比较，避免 getSnapshot 警告
|
||
* 使用 useMemo 稳定 selector 函数引用
|
||
*/
|
||
export const useMessageSelectors = (): Pick<
|
||
WeChatState,
|
||
| "currentMessages"
|
||
| "currentMessagesHasMore"
|
||
| "messagesLoading"
|
||
| "isLoadingData"
|
||
> => {
|
||
const selector = useMemo(
|
||
() => (state: WeChatState) => ({
|
||
currentMessages: state.currentMessages,
|
||
currentMessagesHasMore: state.currentMessagesHasMore,
|
||
messagesLoading: state.messagesLoading,
|
||
isLoadingData: state.isLoadingData,
|
||
}),
|
||
[],
|
||
);
|
||
return useWeChatStore(useShallow(selector));
|
||
};
|
||
|
||
/**
|
||
* UI 状态相关的 selector
|
||
* 使用 useShallow 进行 shallow 比较，避免 getSnapshot 警告
|
||
* 使用 useMemo 稳定 selector 函数引用
|
||
*/
|
||
export const useUIStateSelectors = (): Pick<
|
||
WeChatState,
|
||
"showCheckbox" | "EnterModule" | "showChatRecordModel"
|
||
> => {
|
||
const selector = useMemo(
|
||
() => (state: WeChatState) => ({
|
||
showCheckbox: state.showCheckbox,
|
||
EnterModule: state.EnterModule,
|
||
showChatRecordModel: state.showChatRecordModel,
|
||
}),
|
||
[],
|
||
);
|
||
return useWeChatStore(useShallow(selector));
|
||
};
|
||
|
||
/**
|
||
* AI 相关的 selector
|
||
* 使用 useShallow 进行 shallow 比较，避免 getSnapshot 警告
|
||
* 使用 useMemo 稳定 selector 函数引用
|
||
*/
|
||
export const useAISelectors = (): Pick<
|
||
WeChatState,
|
||
"isLoadingAiChat" | "quoteMessageContent" | "aiQuoteMessageContent"
|
||
> => {
|
||
const selector = useMemo(
|
||
() => (state: WeChatState) => ({
|
||
isLoadingAiChat: state.isLoadingAiChat,
|
||
quoteMessageContent: state.quoteMessageContent,
|
||
aiQuoteMessageContent: state.aiQuoteMessageContent,
|
||
}),
|
||
[],
|
||
);
|
||
return useWeChatStore(useShallow(selector));
|
||
};
|
||
|
||
/**
|
||
* 操作方法 selector
|
||
* 使用 useShallow 进行 shallow 比较，避免 getSnapshot 警告
|
||
* 虽然方法引用稳定，但返回的对象需要 shallow 比较
|
||
*/
|
||
export const useWeChatActions = () => {
|
||
const selector = useMemo(
|
||
() => (state: WeChatState) => ({
|
||
addMessage: state.addMessage,
|
||
updateMessage: state.updateMessage,
|
||
recallMessage: state.recallMessage,
|
||
loadChatMessages: state.loadChatMessages,
|
||
updateShowCheckbox: state.updateShowCheckbox,
|
||
updateEnterModule: state.updateEnterModule,
|
||
updateQuoteMessageContent: state.updateQuoteMessageContent,
|
||
updateIsLoadingAiChat: state.updateIsLoadingAiChat,
|
||
updateSelectedChatRecords: state.updateSelectedChatRecords,
|
||
updateShowChatRecordModel: state.updateShowChatRecordModel,
|
||
setCurrentContact: state.setCurrentContact,
|
||
updateAiQuoteMessageContent: state.updateAiQuoteMessageContent,
|
||
}),
|
||
[],
|
||
);
|
||
return useWeChatStore(useShallow(selector));
|
||
};
|