React Native Realm DB "objects()" 阻止/冻结 UI

Question

我有一个JS服务，其函数返回promise。这些承诺使用 Realm DB 库。但是，每当我的动作创建者使用 React w/Redux Thunk 调用这些函数时，UI 就会冻结。我无法显示加载圆圈，无法拉出侧边栏，并且在解决承诺之前后退按钮不起作用。一旦完成，所有触摸按下都会排队并一次执行，这使得它变得混乱。

如果我缺少 Realm DB 的异步(或缺乏异步(行为的基本内容，请告诉我！将不胜感激。！

---

服务.js

export {
getProjects() {
return Realm.open({ config.db }).then(db => db.objects("Projects"));
}
}

---

动作.js(动作创建器(

import Service from "./service";
export {
getAllProjects() {
return async dispatch => {
const allProjects = await Service.getProjects();
dispatch({
type: ....,
payload: allProjects
})
}
}
}

---

组件.js(React Native(

class Component extends ... {
componentDidMount() {
this.props.getAllProjects();
}
render() {
const { Projects } = this.props;
if(Projects.loading) {
return <LoadingCircle />; // This never gets displayed, even though the Projects.loading yields "true".
}

return JSON.stringify(this.props.Projects);
}
}

我希望对这个基本问题的任何修复都可以解决我的问题，即路由器在 Realm DB 完成之前无法动画/过渡，再加上用户输入排队。

我尝试使用 Axios 发出一个大的长请求，看看它是否会产生同样的问题。但是，它似乎只发生在 Realm DB 上，因为 Axios 似乎并没有阻止 UI。

Answer 1

我认为您的问题在于您如何打开它。Realm.open 不是一个承诺，它返回一个进度承诺。

https://realm.io/docs/javascript/latest/api/Realm.html#.open

例如，您的代码可以更改为...

Realm.open(config)
.progress(() => {/** progress callback here **/} )
.then(realm => { 
realm.objects('Projects')
})

或者像其他部分一样重写为异步/等待

let progress = Realm.open(config)
let realm = await progress
return realm.objects('Projects')

或者，如果要传递进度处理程序，也可以执行此操作

let realm = await Realm.open(config).progress(() => {/** progress callback here **/})
return realm.objects('Projects')