什么是最佳实践/模式,使得Realm成为React Native应用程序中的响应式数据源?特别是对于展示和容器组件模式而言?
这里有一个例子,我想要让它变得响应式:Realm with React Native
自动更新/更改事件文档有点薄弱,官方示例也没有使用此功能(据我所知)。
什么是最佳实践/模式,使得Realm成为React Native应用程序中的响应式数据源?特别是对于展示和容器组件模式而言?
这里有一个例子,我想要让它变得响应式:Realm with React Native
自动更新/更改事件文档有点薄弱,官方示例也没有使用此功能(据我所知)。
通过订阅事件并在接收到更改事件时更新UI,您可以使示例具有响应性。目前,仅在提交写事务时发送事件,但是更细粒度的更改事件将在将来添加。现在,您可以添加以下构造函数以在更改时更新UI:
constructor(props) {
super(props);
this.realm = new Realm({schema:[dogSchema]})
this.realm.addListener('change', () => {
this.forceUpdate()
});
}
你需要持有一个 Realm 实例来保持通知的活性,并且你可以在组件的其余部分中使用这个 Realm 实例。constructor(props) {
super(props);
this.realm = new Realm({schema:[dogSchema]})
this.state = {...}; // Initial state of component.
this.realm.addListener('change', () => {
this.setState({...}); // Update state instead of using this.forceUpdate()
});
}
我认为@Ari给了我一个很好的答案,适用于redux
的人们,因为我也在苦苦挣扎。我不确定它是否足够不可变,但是它有效!
我只是在addListener
内部调度getVehicles
操作,它就可以正常工作!
Below is UI component whose constructor function makes the magic!
//- importing my realm schema
import realm from '../../db/models';
//- Importing my action
import { getVehicles } from './../../actions/vehicle';
@connect((store) => {
return {
vehicle: store.vehicle.vehicles
}
})
export default class Devices extends Component {
constructor(props) {
super(props);
realm.addListener('change', () => {
props.dispatch(getVehicles());
});
}
}
import Realm from 'realm';
class VehicleSchema {};
VehicleSchema = {
name: 'vehicleInfo',
properties: {
vehicleName: 'string',
vehicleNumber: 'string',
vehiclePassword: 'string',
vehiclePasswordTrigger: 'bool',
vehicleType: 'string',
vehiclePicture: { type: 'data', optional: true }
}
};
export default new Realm({schema: [VehicleSchema]});
Below is the actions/vehicle file, which gets dispatched in the constructor above.
import { queryVehicle } from './../db/queryVehicle';
export function getVehicles() {
const vehicles = queryVehicle();
return function(dispatch) {
dispatch({type: "GOT_VEHICLES", payload: vehicles});
}
}
import vehicleModel from './models';
const queryVehicle = (queryInfo="vehicleInfo", filter='') => {
const objects = vehicleModel.objects(queryInfo);
if(filter.length === 0) return objects;
let results = objects.filtered(filter);
return results;
};
export { queryVehicle };
免责声明:我不确定这段代码是否足够不变,或者是否遵循良好的redux实践,因为我刚开始使用redux,请给我一些建议和评论,指出我的错误。
我还猜测在这里实现 reducer 并不重要。
基本上,它只是清除dataSource,然后在有插入
或删除
时再次使用setState回调插入它,但是修改
只需滚动并自动更新即可。
let feed = this.props.store.feed;
feed.addListener((name, changes) => {
if (changes.insertions.length || changes.deletions.length) {
this.setState({dataSource: this.ds.cloneWithRows([])},
() => this.setState({dataSource: this.ds.cloneWithRows(feed)})
);
} else {
this.setState({dataSource: this.ds.cloneWithRows(feed)});
}
});
super(props)
替换this.forceUpdate()
吗? - ThorbenAsetState
。而不是在render
中计算dogProp
,你应该将它放在state
中,这将自动触发重新渲染。类似这样:this.setState({dogProp: this.realm.objects('Dog').length})
。你还需要实现getInitialState
。 - Ari