Full mobx flow

src/App.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
+import App from './Components/App';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');

src/App.js → src/Components/App.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 
 import {inject, observer} from 'mobx-react';
+import NavBar from './NavBar/NavBar';
 
 
 @inject('BirdStore') // allows us to inject the store into this app. Inspect the page with ReactDev tools to see this component
@@ -21,6 +22,7 @@ class App extends Component {
 
     return (
       <div className="App">
+      <NavBar />
         <h2>
           You have {BirdStore.birdCount} birds.
         </h2>

src/Components/NavBar/NavBar.js

@@ -0,0 +1,24 @@
+import React, {Component} from 'react'
+import {inject, observer} from 'mobx-react';
+
+@inject ('UserStore')
+@observer
+class NavBar extends Component {
+
+    changeHandler = (e) => {
+        e.preventDefault()
+        this.props.UserStore.setUser({username: e.target.value})
+    }
+
+    render(){
+        const user = this.props.UserStore.user
+        return(
+            <div>
+                {user.username ? <p>Hello {user.username}</p> : ""}
+
+                <input onChange={e => this.changeHandler(e)}/>
+            </div>
+        )
+    }
+}
+export default NavBar

src/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+import App from './Components/App';
 import registerServiceWorker from './registerServiceWorker';
 
 import {Provider} from 'mobx-react'

src/stores/BirdStore.js

@@ -4,7 +4,7 @@ class BirdStore {
     constructor(){
         autorun(() => {
           console.log("the birds: ", this.birdCount)
-        }, {delay: 5000})
+        }, {delay: 500}) // can feed a delay, errors, etc into autorun.
       }
     @observable birds = []; // when we say this is observable, mobx wraps it, listening to changes
 

src/stores/UserStore.js

@@ -3,7 +3,9 @@ import {observable, action, computed, autorun} from 'mobx';
 class UserStore {
     constructor(){
         autorun(() => {
-          console.log("Welcome: ", this.user)
+            if(this.user.username){
+                console.log("Welcome: ", this.user)
+            }
         })
       }
     @observable user = {}; // when we say this is observable, mobx wraps it, listening to changes
@@ -14,9 +16,6 @@ class UserStore {
     @computed get getUserInfo () { //used to access the data and perform data on it, this will
         return this.user;        // access the data and perform a change on it.
     }
-    // @computed get birdList () {
-    //     return this.birds;       ////// this isn't needed b/c the birds list is already reached
-    // }
 }
 
 const store =  new UserStore(); // the reason we're doing this, is across our application,