全局 state

大约 5 分钟

全局 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 提供了 useChatContextuseConversationContextuseAddressContext 三个自定义 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 概览

下表中黑色字体为属性名称,蓝色字体为方法名称。

                                                                                                                                                                                                                                               
属性/方法类型描述
currentConversationCurrentConversation当前会话。
conversationListConversation[]所有会话。
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 概览

下表中黑色字体为属性名称,蓝色字体为方法名称。

                                                                                                                                                                                                                                                                                                                                                                                                                       
属性/方法类型描述
messagesMessageUIKit 中的所有消息数据。
repliedMessagechatSDK.MessagesType正在回复的消息
typingTyping正在输入的用户对象。
sendMessage(message: chatSDK.MessageBody) => Promise<void>发送消息。
deleteMessagedeleteMessage: (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 概览

下表中黑色字体为属性名称,蓝色字体为方法名称。

                                                                                                                                                                                       
属性/方法类型描述
appUsersInfoRecord<string, AppUserInfo>所有用户的信息。
groupsGroupItem[]所有群组。
setAppUserInfo(appUsersInfo: Record<string, AppUserInfo>) => void设置用户信息。
setGroups (groups: GroupItem[]) => void设置群组数据。
setGroupMemberAttributes(groupId: string, userId: string, attributes: chatSDK.MemberAttributes) => void设置群成员属性。