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

Question

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

如果我遗漏了 Realm DB 的异步（或缺乏）行为的基本内容，请告诉我！将不胜感激！

---

服务.js

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

---

action.js（动作创建者）

import Service from "./service";

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

---

component.js（反应本机）

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')
  })

或者像其他部分一样重写为 async/await

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')