数据仓库 Store

功能介绍

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 可以返回会话相关的 state 和管理 state 的方法。

使用示例

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 属性和方法概览

                                                                                                                                                                                                                                               

Attribute/Method	Type	Description
currentConversation	CurrentConversation	Current Conversation.
conversationList	Conversation[]	Collection of all conversations.
setCurrentConversation	(currentCvs: CurrentConversation) => void	Method of setting the current conversation.
deleteConversation	(conversation: CurrentConversation) => void	Method of removing a conversation from the conversation list.
topConversation	(conversation: Conversation) => void	Method of move a conversation to the top of the conversation list.
addConversation	(conversation: Conversation) => void	Method of adding a conversation to the conversation list.
modifyConversation	(conversation: Conversation) => void	Method of modifying a conversation.

useChatContext

这个自定义 hook 可以返回消息相关的 state 和管理 state 的方法。

使用示例

import React from "react";
import { useChatContext, useSDK } from "easemob-chat-uikit";

const ChatAPP = () => {
  const { easemobChat } = useSDK(); // get Chat SDK
  const { messages, sendMessage } = useChatContext();
  const sendCustomMessage = () => {
    const customMsg = easemobChat.message.create({
      type: "custom",
      to: "targetId", // The user ID of the peer user for one-to-one chat or the current group ID for group chat.
      chatType: "singleChat",
      customEvent: "CARD",
      customExts: {
        id: "userId",
      },
    });
    sendMessage(customMsg);
  };

  return (
    <div>
      <button onClick={sendCustomMessage}>sendMessage</button>
    </div>
  );
};

useChatContext 属性和方法概览

                                                                                                                                                                                                                                                                                                                                                                                                                       

Attribute/Method	Type	Description
messages	Message	All message data in UIKit.
repliedMessage	easemobChat.MessagesType	Message being replied to.
typing	Typing	A object of users in the typing state.
sendMessage	(message: easemobChat.MessageBody) => Promise<void>	Method of sending messages.
deleteMessage	deleteMessage: (cvs: CurrentConversation, messageId: string | string[]) => void | Promise<void>	Method of deleting messages.
recallMessage	(cvs: CurrentConversation, messageId: string, isChatThread?: boolean) => Promise<void>	Method of recalling a message.
translateMessage	(cvs: CurrentConversation, messageId: string, language: string) => Promise<boolean>	Method of translating a text message.
modifyMessage	(messageId: string, msg: easemobChat.TextMsgBody) => Promise<void>	Method of Modifying a message on the server, and the other party will display the modified message, which is only valid for text messages.
modifyLocalMessage	(id: string, message: easemobChat.MessageBody | RecallMessage) => void	Method of modifying messages locally is valid for any type of message.
updateMessageStatus	(msgId: string, status: 'received' | 'read' | 'unread' | 'sent' | 'failed' | 'sending' | 'default') => void	Method of updating message status.
sendTypingCommand	(cvs: CurrentConversation) => void	Method of sending the command being typing.
setRepliedMessage	(message: easemobChat.MessageBody | null) => void	Method of setting replied message.
clearMessages	(cvs: CurrentConversation) => void	Method of clearing conversation local messages.

useAddressContext

这个自定义 hook 返回联系人群组相关的 state 和管理 state 的方法。

使用示例

import React from "react";
import { useAddressContext } from "easemob-chat-uikit";

const ChatAPP = () => {
  const { appUsersInfo } = useAddressContext();
  console.log(appUsersInfo);
  return <div>ChatAPP</div>;
};

useAddressContext 属性和方法概览

                                                                                                                                                                                       

Attribute/Method	Type	Description
appUsersInfo	Record<string, AppUserInfo>	Information for all users.
groups	GroupItem[]	All groups.
setAppUserInfo	(appUsersInfo: Record<string, AppUserInfo>) => void	Method of setting user information.
setGroups	(groups: GroupItem[]) => void	Method of setting group data.
setGroupMemberAttributes	(groupId: string, userId: string, attributes: easemobChat.MemberAttributes) => void	Method of setting group member attributes.