概述

store 是基于 IM SDK 和 Mobx 封装的全局上下文。它提供 IM UIKit 内部数据驱动的能力，由 Mobx 提供数据和 UI 双向绑定的能力。您可以在 store 中获取各 IM 组件（例如会话组件、通讯录组件、聊天组件等）的上下文，或调用 store 上的一些方法完成您的自定义需求（例如发送自定义消息、场景群聊时添加扩展字段等）。

访问 store

IM UIKit 提供 useStateContext hooks 函数，帮助您在 Provider 的子组件访问 IM UIKit 的上下文。

useStateContext hooks 函数的返回值说明如下：

示例代码：

import React from 'react'
import { useStateContext } from '@xkit-yx/im-kit-ui'

const ChildrenA = () => {

  // 获取全局上下文
  const { store, nim, initOptions, localOptions } = useStateContext()

  return (
    <div>我是 Provider 的子组件</div>
  )
}

<script lang="ts">
    const initOptions = {
     ...
    }
    const localOptions = {
      ...
    }
    // 初始化相关操作
    const uikit = new IMUIKit({
      initOptions,
      singleton: true,
      sdkVersion: 1,
      localOptions
    })
    uikit.render(...)

    // 获取全局上下文
    const { store, nim, initOptions, localOptions } = uikit.getStateContext()
  },
};
</script>

调用 store 方法

如果需要使用store中的数据自行渲染，请使用 mobx-react 提供的 observer 包裹您的 React 组件，其他框架可使用 autorun 来监听 store 数据的变化，从而改变 UI。具体使用说明请参见 Mobx 官方文档。

调用 store 相较于直接调用 SDK 方法，具备数据与 UI 双向绑定的能力，无需您额外处理 UI 的增删。

store API 说明：

例如您想在创建群聊的同时添加群扩展字段，可调用群组 store（ teamStore）中的创建群组接口实现，具体参数请参考createTeamActive 。

示例代码：

reactstore.teamStore.createTeamActive({
    name: '测试群',
    avatar: 'https:xxxxxxxxxxx',
    accounts: ['account1', 'account2'],
    ext: JSON.stringify({ test: 'test' })
}).then(res => {
    console.log('======创建群成功=======');
    console.log(res);
}).catch(err => {
    console.log('======创建群失败=======');
    console.log(err);
})

使用原生 SDK 的 API

如果您需要自行实现目前 UIKit 还未实现的能力，且原生 IM Web SDK 已提供该能力。您可以通过调用原生 IM Web SDK 中提供的接口来实现。原生 IM Web SDK 中的接口请参考对应的 API 文档。

例如，您想云端全文检索消息（按时间分页搜索），可以调用原生 IM Web SDK 中的msgFtsInServerByTiming 方法，示例代码如下：

import { useStateContext } from '@xkit-yx/im-kit-ui'
const { store, nim } = useStateContext()
nim.nim.msgFtsInServerByTiming({
  keyword: '你好',
  done:(err, data) => {
     console.log('======data======', data)
  }
})

// 从 uikit 实例上获取
const { store, nim } = uikit.getStateContext() || window.__xkit_store__

nim.nim.msgFtsInServerByTiming({
  keyword: '你好',
  done:(err, data) => {
     console.log('======data======', data)
  }
})