react native - script - objeto singleton en reaccionar nativo

singleton javascript es6

Question

Soy nuevo en reaccionar nativo. Deseo almacenar múltiples cadenas pequeñas pequeñas en una clase de objeto singleton común y quiero acceder desde un objeto singleton para todos los componentes. ¿Alguien puede ayudarme a implementar objetos individuales para reaccionar nativo?

Ex

Componente 1 - Botón de inicio de sesión - >> éxito -> necesidad de almacenar el ID de usuario en el objeto singleton.

Componente 2 -> obtener ID de usuario almacenado del objeto singleton. ¿Cómo puedo implementarlo?

Answer 1

Hay una solución para esto, el paquete nativo reacciona require todos los módulos en la fase de compilación para generar un paquete, y después requiere que genere una identificación interna para el módulo, que a partir de ese momento se hace referencia en toda la memoria de tiempo de ejecución , por lo que si exportamos una instancia de una clase del archivo, se hará referencia a ese objeto cada vez que se importe ese archivo.

TLDR;

Solución I:

class abc {
}
module.exports = new abc()

Solución II: supongo que quiere obtener sus cadenas, que son estáticas y no cambiarán, por lo que puede declararlas como estáticas y acceder a ellas directamente con el nombre de clase

FYI: esto funciona con webpack también.

Answer 2

Aquí hay una manera simple de hacerlo ...

export default class CommonDataManager {
static myInstance = null;
_userID = "";
/**
* @returns {CommonDataManager}
*/
static getInstance() {
if (this.myInstance == null) {
this.myInstance = new CommonDataManager();
}
return myInstance;
}
getUserID() {
return this._userID;
}
setUserID(id) {
this._userID = id;
}
}

Y aquí está cómo usarlo ...

import CommonDataManager from ''./CommonDataManager'';
// When storing data.
let commonData = CommonDataManager.getInstance();
commonData.setUserID("User1");
// When retrieving stored data.
let commonData = CommonDataManager.getInstance();
let userId = commonData.getUserID();
console.log(userId);

Espero que esto funcione para usted :)

Answer 3

Sugiero crear una clase estática que almacene datos usando AsyncStorage . Mencionó en un comentario que ya está usando AsyncStorage , pero no le gusta difundir esta funcionalidad en su aplicación. (es decir, try-catches todas partes, cada componente necesita verificar si una clave está disponible, etc.) Si esta funcionalidad estuviera en una sola clase, limpiaría mucho su código.

Otra ventaja de este enfoque es que puede cambiar la implementación con bastante facilidad, por ejemplo, puede optar por usar un objeto en memoria o AsyncStorage o lo que sea, y solo tendría que cambiar este archivo

NOTA: AsyncStorage no es una forma segura de almacenar información confidencial. Consulte esta pregunta para obtener más información sobre la seguridad de AsyncStorage y sus alternativas.

Dicho esto, así es como me imagino que podría ser una clase global de soporte de datos:

export default class dataManager {
static storeKeyValue(key, value) {
// your choice of implementation:
// check if key is used
// wrap in try-catch
// etc.
}
static getValueForKey(key) {
// get the value out for the given key
}
// etc...
}

Luego, para usar esta clase en cualquier lugar de tu aplicación, simplemente importa donde sea necesario, así:

import dataManager from ''path/to/dataManager.js'';
// store value
dataManager.storeKeyValue(''myKey'', ''myValue'');
// get value
const storedValue = dataManager.getValueForKey(''myKey'');

EDITAR: Usar Flux , Redux o una tecnología similar es probablemente la forma preferida / sugerida de hacerlo en la mayoría de los casos, pero si considera que el patrón Singleton funciona mejor para su aplicación, este es un buen camino a seguir. Vea que puede que no necesite Redux