mobx-react erstelle beobachtbaren Shop

Question

Ich habe schon eine Weile damit herumgespielt und bin mir nicht sicher, ob das nicht möglich ist oder ob ich etwas grundlegendes in ES6, React oder MobX vermisse.

Ich möchte einen Mobx-Speicher in einer separaten Datei wie unten haben;

import { observable, action } from 'mobx'; 

export default class Store { 

@observable data = []; 

@action getAll(){ 
    this.data = [{ 
    itemTitle: 'Item One' 
    },{ 
    itemTitle: 'Item Two' 
    }] 
    return this.data 
} 

@action pushItem(item){ 
    this.data.push(item) 
} 

addAfter5Secs(){ 
    setTimeout(() => { 
    console.log('Item Added') 
    this.pushItem({ 
    itemTitle: 'Item Two' 
    })}, 5000) 
} 

constructor() { 
    console.log('Store Created') 
    this.getAll(); 
    this.addAfter5Secs() 
} 
} 

Dann möchte ich es in einer Ansicht importieren und zu diesem Zeitpunkt eine Instanz dieses Speichers erstellen.

import React from "react"; 
import { List, Button } from 'semantic-ui-react'; 
import { observer, inject } from 'mobx-react'; 
import Store from '../Data/Store'; 
import DevTools from 'mobx-react-devtools'; 

const dataItems = new Store 

@observer 
export default class ScriptsHome extends React.Component { 
    render() { 
    const items = observer(dataItems) 
    return (
     <List> 
     {items.data.map((reg, key) => { 
      return(
      <List.Item key={key}> 
        <Button content={reg.itemTitle}/> 
       </List.Item>) 
      })} 
      <DevTools /> 
     </List> 
    ); 
    } 
} 

Ich möchte nicht, dass es durch einen Anbieter aus der Wurzelkomponente zu übergeben oder den Laden haben instanziiert mit dem ‚neuen‘ Schlüsselwort in den Export. Ich habe tatsächlich Dutzende von Geschäften, also möchte ich nur, dass sie nach Bedarf von Ansichten erstellt werden.

Der obige Code wird die ersten 2 Elemente rendern, das dritte Element wird erst nach 5 Sekunden zum Laden hinzugefügt, aber das Rendern wird nicht automatisch auf der Komponente ausgelöst, so dass das Element nicht angezeigt wird. Wenn ich die Renderfunktion erzwinge, wird es angezeigt.

Ich benutze einen Router, um diese Ansicht aufzurufen, vielleicht ist das auch problematisch?

Ich lerne nur Mobx, reagieren, etc, so dass jede Hilfe geschätzt wird. Alle Beispiele scheinen nur ein oder zwei Geschäfte zu verwenden.

Answer 1

Also nach ein wenig Zeit mit diesem Problem ist es kein Problem mit MobX. Die Versionen von Reagieren und Reagieren Router schien das Problem zu sein. Reagiere Router dom jetzt und es ist in Ordnung.