全局 state
大约 5 分钟
UIKit-Web 集成文档
全局 state
聊天 UIKit 的内部 state 数据全部存储在 rootStore,rootStore 数据更新会驱动各个组件更新 UI。你可以使用 rootStore 上的数据,也可以调用 UIKit 提供的方法来更新数据。
rootStore 包含以下数据模块:
- initConfig:UIKit 初始化数据。
- client:即时通讯 IM SDK 实例。
- conversationStore: 会话列表相关数据。
- messageStore: 消息相关数据。
- addressStore:通讯录相关数据。
store | 属性 | 描述 |
conversationStore | ||
currentCvs | 当前的会话。 | |
conversationList | 全部会话。 | |
searchList | 搜索到的会话。 | |
messageStore | ||
message | 整个 app 的消息,里面包含单聊(singleChat)和群聊(groupChat)的消息以及根据消息 ID 存储的消息(byId)。 | |
selectedMessage | 多选选中的消息 | |
repliedMessage | 被引用的消息 | |
typing | 是否正在输入 | |
unreadMessageCount | 当前会话中未读的消息数 | |
addressStore | ||
appUsersInfo | 所有用户的用户属性,展示头像昵称时用到 | |
contacts | 所有的联系人 | |
groups | 所有加入的群组 | |
searchList | 搜索到的联系人或群组 | |
requests | 好友请求 |
使用示例
import { rootStore } from "easemob-chat-uikit";
调用 API 改变全局 state
聊天 UIKit 提供了 useChatContext
、useConversationContext
、useAddressContext
三个自定义 hooks 来获取改变 state 的 API。
useConversationContext
该自定义的 hook 可以返回会话相关数据和数据管理方法。
使用示例
import React from "react";
import { useConversationContext } from "easemob-chat-uikit";
const ChatAPP = () => {
const { conversationList, setCurrentConversation } = useConversationContext();
const setCurrentCvs = () => {
setCurrentConversation({
chatType: "singleChat",
conversationId: "userId",
});
};
return (
<div>
<button onClick={setCurrentCvs}>setCurrentConversation</button>
</div>
);
};
useConversationContext 概览
下表中黑色字体为属性名称,蓝色字体为方法名称。
属性/方法 | 类型 | 描述 |
currentConversation | CurrentConversation | 当前会话。 |
conversationList | Conversation[] | 所有会话。 |
setCurrentConversation | (currentCvs: CurrentConversation) => void | 设置当前会话。 |
deleteConversation | (conversation: CurrentConversation) => void | 将会话从会话列表删除。 |
topConversation | (conversation: Conversation) => void | 置顶会话。 |
addConversation | (conversation: Conversation) => void | 将会话添加到会话列表 |
modifyConversation | (conversation: Conversation) => void | 修改会话。 |
useChatContext
该自定义 hook 可返回消息相关数据和数据管理方法。
Usage example
import React from "react";
import { useChatContext, useSDK } from "easemob-chat-uikit";
const ChatAPP = () => {
const { chatSDK } = useSDK(); // 获取即时通讯 IM SDK
const { messages, sendMessage } = useChatContext();
const sendCustomMessage = () => {
const customMsg = chatSDK.message.create({
type: "custom",
to: "targetId", // 单聊为对端用户 ID,群组聊天为当前群组 ID。
chatType: "singleChat",
customEvent: "CARD",
customExts: {
id: "userId",
},
});
sendMessage(customMsg);
};
return (
<div>
<button onClick={sendCustomMessage}>sendMessage</button>
</div>
);
};
useChatContext 概览
下表中黑色字体为属性名称,蓝色字体为方法名称。
属性/方法 | 类型 | 描述 |
messages | Message | UIKit 中的所有消息数据。 |
repliedMessage | chatSDK.MessagesType | 正在回复的消息 |
typing | Typing | 正在输入的用户对象。 |
sendMessage | (message: chatSDK.MessageBody) => Promise<void> | 发送消息。 |
deleteMessage | deleteMessage: (cvs: CurrentConversation, messageId: string | string[]) => void | Promise<void> | 删除消息。 |
recallMessage | (cvs: CurrentConversation, messageId: string, isChatThread?: boolean) => Promise<void> | 撤回消息。 |
translateMessage | (cvs: CurrentConversation, messageId: string, language: string) => Promise<boolean> | 翻译文本消息。 |
modifyMessage | (messageId: string, msg: chatSDK.TextMsgBody) => Promise<void> | 编辑服务器上的消息。编辑后,对端用户会显示修改后的消息。该方法仅对文本消息有效。 |
modifyLocalMessage | (id: string, message: chatSDK.MessageBody | RecallMessage) => void | 编辑本地消息。该方法对任何类型的消息均有效。 |
updateMessageStatus | (msgId: string, status: 'received' | 'read' | 'unread' | 'sent' | 'failed' | 'sending' | 'default') => void | 更新消息状态。 |
sendTypingCommand | (cvs: CurrentConversation) => void | 发送正在输入的命令。 |
setRepliedMessage | (message: chatSDK.MessageBody | null) => void | 设置回复的消息。 |
clearMessages | (cvs: CurrentConversation) => void | 清空会话的本地消息。 |
useAddressContext
该自定义 hook 可以返回联系人和群组相关的数据以及数据管理方法。
使用示例
import React from "react";
import { useAddressContext } from "easemob-chat-uikit";
const ChatAPP = () => {
const { appUsersInfo } = useAddressContext();
console.log(appUsersInfo);
return <div>ChatAPP</div>;
};
useAddressContext 概览
下表中黑色字体为属性名称,蓝色字体为方法名称。
属性/方法 | 类型 | 描述 |
appUsersInfo | Record<string, AppUserInfo> | 所有用户的信息。 |
groups | GroupItem[] | 所有群组。 |
setAppUserInfo | (appUsersInfo: Record<string, AppUserInfo>) => void | 设置用户信息。 |
setGroups | (groups: GroupItem[]) => void | 设置群组数据。 |
setGroupMemberAttributes | (groupId: string, userId: string, attributes: chatSDK.MemberAttributes) => void | 设置群成员属性。 |