Mobx ne réagit jamais

Question

J'essaie de comprendre l'implémentation de mobx dans React. J'ai utilisé create react app et mettre à jour la configuration par défaut pour utiliser les décorateurs. Ensuite, j'ai créé un magasin simple comme ceci:

EDIT: après Ben Hare (! De grâce à lui) réponse Je mis à jour mon code comme ceci:

index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 
import MessageStore from "./store/messages"; 

ReactDOM.render(<App store={new MessageStore()} />, 
document.getElementById('root')); 

** app.js **

import React from "react"; 
import { observer } from "mobx-react"; 

@observer 
export default class App extends React.Component { 

    constructor(props) { 
     super(props); 
     this.store = props.store; 
    } 

    render() { 
     return <ul> 
      { this.store.allMessages.map((msg) => { 
       return <li key={msg}>{msg}</li> 
      })} 
     </ul> 
    } 
} 

messages.js

import {action, observable, computed} from "../../node_modules/mobx/lib/mobx"; 

export default class MessageStore { 

    @observable messages = ["My first message"]; 

    constructor() { 
     setInterval(() => { 
      // Add some random messages every second 
      this.addMessage(Math.random()); 
     }, 1000); 
    } 

    @action addMessage(msg) { 
     this.messages.push(msg); 
    } 

    @computed get allMessages() { 
     return this.messages; 
    } 

} 

Le premier message est affiché, mais le composant ne se met jamais à jour lorsque setInterval ajoute un message dans le magasin. Pouvez-vous m'aider ?

Answer 1

Works pour moi:

https://codesandbox.io/s/LgQXNBnNW

Avez-vous vu des erreurs dans le journal du navigateur ou du terminal?