Question

我有一个JS服务，其功能返回promise。这些承诺使用Realm数据库库。但是，每当我的React动作创建者从React w / Redux Thunk中调用这些函数时，UI都会冻结。我无法显示加载圆圈，无法拉出侧边栏，并且后退按钮在兑现承诺之前无法起作用。一旦完成，所有触摸按键都将排入队列并立即执行，这将使其变得混乱。

如果我缺少Realm DB的异步（或缺少）行为的基本知识，请告诉我！非常感谢。！

service.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（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完成之前无法进行动画/转换以及用户输入被排队的问题。在此先感谢您的帮助。

更新1
我尝试使用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')

React Native Realm数据库“ objects（）”阻止/冻结UI

1 个答案: