全局 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 { easemobChat } = useSDK(); // 获取即时通讯 IM SDK
  const { messages, sendMessage } = useChatContext();
  const sendCustomMessage = () => {
    const customMsg = easemobChat.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	easemobChat.MessagesType	正在回复的消息
typing	Typing	正在输入的用户对象。
sendMessage	(message: easemobChat.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: easemobChat.TextMsgBody) => Promise<void>	编辑服务器上的消息。编辑后，对端用户会显示修改后的消息。该方法仅对文本消息有效。
modifyLocalMessage	(id: string, message: easemobChat.MessageBody | RecallMessage) => void	编辑本地消息。该方法对任何类型的消息均有效。
updateMessageStatus	(msgId: string, status: 'received' | 'read' | 'unread' | 'sent' | 'failed' | 'sending' | 'default') => void	更新消息状态。
sendTypingCommand	(cvs: CurrentConversation) => void	发送正在输入的命令。
setRepliedMessage	(message: easemobChat.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: easemobChat.MemberAttributes) => void	设置群成员属性。