ReactNative:跨所有组件和操作共享sqlite-instance的最佳方法

时间:2016-05-20 09:06:43

标签: javascript reactjs sqlite react-native redux

故事:

在本机反应应用中,我们使用react-native-sqlite-storage来处理iOS和Android上的sqlite3。

这个插件使我们能够以这种方式处理本机sqlite实现:

var db = SQLite.openDatabase("test.db".....);

跨多个组件共享db-instance的最佳方法是什么?为了提供更多细节,但这不是这个问题的一部分,我们使用redux并拥有许多动作文件。其中一些人也需要访问数据库。

为了处理跨所有组件和操作的单个打开的sqlite实例,以及从本机组件更松散地耦合,我构建了一个封装存储插件的类DataStorage。这个类包含sqlite数据库的一个实例(使用react-native-sqlite-storage)并为应用程序提供方便的方法,如“getUserByName()”,“getAllItems”等。

避免多个实例此DataStorage类及其内部sqlite-db-instance,我执行了以下操作:

  1. 构建DataStorage类
  2. 创建仅驻留在DataStorage.js
  3. 中的全局变量
  4. 将函数sharedDataStorage()导出到所有调用者 需要数据库访问
  5. DataStorage.js代码

    const SQLite = require('react-native-sqlite-storage');
    
    const _dataStorage = null;
    
    export class DataStorage {
    
        constructor(autoCheckMigration = true, lang = 'en') {
            console.log("DataStorage CTOR called");
    
            if(_dataStorage !== null) {
                throw 'There is already an instance of DataStorage alive';
            }
    
            // store this instance in a global variable
            _dataStorage = this;
    
            this.db = SQLite.openDatabase('myapp.db', '1.0', 'Myapps Database', 5 * 1024 * 1024, this.openCB, this.errorCB);
    
            if (autoCheckMigration) {
                this.checkDatabaseMigration(lang);
            }
        }
    
        many_other_convenience_methods_here(...) {}
    }
    
    export function sharedDataStorage() {
        return _dataStorage;
    }
    

    应用程序根组件:

    在应用程序根组件中,我创建了调用其构造函数的数据库实例。

    export default class Application extends React.Component {
    
        constructor(props) {
            super(props);
    
            this.setupDatabase();
        }
    
        render() {
            return (
                <Provider store={store}>
                        <ApplicationContainer />
              </Provider>
            );
        }
    
        setupDatabase() {
            this.setState( {dataStorage: new DataStorage()} );
        }
    }
    

    某些动作_... js:

    现在的所有其他组件和操作文件必须以这种方式访问​​此DataStorage-Class:

    import { sharedDataStorage } from '../data/dataStorage';
    
    ...
    
    async function persistContacts(contacts) {
        const dataStorage = sharedDataStorage();
    
        contacts.forEach( (contact) => {
            dataStorage.persistContact(contact);
        });
    }
    

    这种方式工作得很好,虽然我不确定,是否有更好的方法在react-native中共享数据库连接。

    还有哪些其他可能性?

1 个答案:

答案 0 :(得分:12)

我这样解决:

<强> database.js

'use strict';
import React from 'react';
import SQLite from 'react-native-sqlite-storage';


var database_name = "dbname.db";
var database_version = "1.0";
var database_displayname = "db";
var database_size = 200000;

let conn = SQLite.openDatabase(database_name, database_version, database_displayname, database_size, openDBHandler, errorDBHandler);

class Database  {
    getConnection() {
        return conn;
    }
}

module.exports = new Database();

接下来,在您的组件中,您可以通过以下方式获取数据库连接:

var connection = Database.getConnection();
相关问题