Erstellen Sie eine Vorlage für die Klassen

Question

Ich habe 10 + Klassen (MobX speichert, aber nicht relevant), die 90% des Codes gemeinsam:

PriceStore.js

// Store to get the latest price of something 
class PriceStore { 
    @observable price; 
    @observable error; 

    constructor() { 
    someSocket.on('price', this.setPrice); 
    someSocket.on('price_error', this.setError) 
    } 

    static instance = null; // To enforce a singleton 

    static get() { 
    if (!PriceStore.instance) { 
     PriceStore.instance = new PriceStore(); 
    } 
    return PriceStore.instance; 
    } 

    @action setPrice = price => this.price = price; 

    @action setError = error => this.error = error; 
} 

LatestUserStore.js

// Store to get the latest signed up user 
class LatestUserStore { 
    @observable latestUser; 
    @observable error; 

    constructor() { 
    someSocket.on('latestUser', this.setLatestUser); 
    someSocket.on('latestUser_error', this.setError) 
    } 

    static instance = null; // To enforce a singleton 

    static get() { 
    if (!LatestUserStore.instance) { 
     LatestUserStore.instance = new LatestUserStore(); 
    } 
    return LatestUserStore.instance; 
    } 

    @action setLatestUser = latestUser => this.latestUser = latestUser; 

    @action setError = error => this.error = error; 

    @computed get fullname() { ... }; // This store has an additional method. 
} 

Mein Problem ist: Wie kann ich diese 90% des Codes faktorisieren?

Idealerweise würde ich gerne selbst eine createMobxStore Funktion schreiben, so dass ich ihm die folgende Art und Weise verwenden:

const PriceStore = createMobxStore('price'); 
// Now I'll be able to use PriceStore as if it was defined like above. 

const BaseLatestUserStore = createMobxStore('latestUser'); 
class LatestUserStore extends BaseLatestUserStore { 
    @computed get fullname() { ... }; 
} 
// Now I'll be able to use LatestUserStore as if it was defined like above. 

Ich würde etwas Hilfe diese createMobxStore Funktion zu schreiben, wenn überhaupt.

Answer 1

Wenn ich Sie richtig verstanden habe, versuchen Sie, diese Klasse dynamisch zu erstellen.

Ich habe eine Wrapper-Funktion erstellt, die diese Speicherklasse erstellen sollte (nicht getestet), mit dynamischer Observable und Setter-Funktion unter Verwendung des Parameters storeName.

function createStore(storeName) { 

    return class Dynamic { 
     @observable error; 

     constructor() { 
      // this[storeName]; 
      extendObservable(this, { 
       [storeName]: null, 
       ['set' + storeName]: action((value) => this[storeName] = value) 
      }) 

      someSocket.on(storeName, this['set' + storeName]); 
      someSocket.on('price_error', this.setError) 
     } 

     static instance = null; // To enforce a singleton 

     static get() { 
      if (!Dynamic.instance) { 
       Dynamic.instance = new PriceStore(); 
      } 
      return Dynamic.instance; 
     } 

     @action setError = error => this.error = error; 
    } 
} 

Und es wie folgt verwenden:

const UserStore = createStore('user'); 

class SomeStore extends UserStore { 

    moreActions() { ... } 
} 

Hoffe, es hilft.