2016-05-20 1 views
2

Die Geschichte:

In einer Reaktion-native App verwenden wir react-native-sqlite-storage für mit sqlite3 sowohl auf iOS und Android zu tun.ReactNative: beste Ansatz eine SQLite-Instanz über alle Komponenten und Aktionen teilen

Dieses Plugin ermöglicht es uns mit nativer SQLite Implementierung in dieser Weise zu behandeln:

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

Was ist der beste Ansatz wäre, die db-Instanz über mehrere Komponenten zu teilen? Um mehr Details zu geben, aber das ist nicht Teil dieser Frage, verwenden wir Redux und haben viele Action-Dateien. Einige von ihnen benötigen auch Zugriff auf die Datenbank.

Um mit einer einzigen geöffneten Instanz von sqlite über alle Komponenten und Aktionen hinweg zu arbeiten und auch lose von nativen Komponenten gekoppelt zu sein, habe ich eine Klasse DataStorage erstellt, die das Storage-Plugin kapselt. Diese Klasse enthält eine Instanz der sqlite-Datenbank (unter Verwendung des react-native-sqlite-Speichers) und stellt der Anwendung bequeme Methoden wie "getUserByName()", "getAllItems" usw. zur Verfügung.

Um vermeiden mehrere Instanzen dieser Datastorage-Klasse und auch sein inneres SQLite-db-Beispiel habe ich die folgende:

  1. die Datastorage-Klasse bauen
  2. eine globale Variable erstellen, die nur in Datastorage mit Wohnsitz Js
  3. Export eine Funktion sharedDataStorage() zu den allen Anrufern die Bedarf Zugriff auf die Datenbank

Code of 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; 
} 

Anwendungen Stammkomponente:

In der Anwendungen Wurzelkomponente erstellen i die Datenbankinstanz den Konstruktor aufrufen.

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()}); 
    } 
} 

Einige Aktion _... js:

Alle anderen Komponenten und Action-Dateien jetzt müssen Gewinn Zugriff auf diese Datastorage-Klasse auf diese Weise:

import { sharedDataStorage } from '../data/dataStorage'; 

... 

async function persistContacts(contacts) { 
    const dataStorage = sharedDataStorage(); 

    contacts.forEach((contact) => { 
     dataStorage.persistContact(contact); 
    }); 
} 

Auf diese Weise ist funktioniert ganz gut, obwohl ich mir nicht sicher bin, ob es bessere Ansätze gibt, die eine Datenbankverbindung in react-native teilen.

Welche anderen Möglichkeiten gibt es?

Antwort

6

löse ich auf diese Weise:

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(); 

Next in Ihrer Komponente können Sie die Datenbankverbindung mit bekommen:

var connection = Database.getConnection(); 
Verwandte Themen