Action -> State -> Views

import { observable, autorun } from 'mobx'

var todoStore = observable({
  /* some observable state : 상태 값*/
  todos: [],

  /* a derived value : 파생된 값 */
  get completedCount() {
    return this.todos.filter(todo => todo.completed).length
  },
})

/* a function that observes the state : 상태를 관찰한다. */
autorun(function() {
  console.log(
    'Completed %d of %d items',
    todoStore.completedCount,
    todoStore.todos.length
  )
})

/* ..and some actions that modify the state : 상태를 수정하는 액션을 취한다. */
todoStore.todos[0] = {
  title: 'Take a walk',
  completed: false,
}
// -> synchronously prints 'Completed 0 of 1 items'

todoStore.todos[0].completed = true
// -> synchronously prints 'Completed 1 of 1 items'

// Usage
observable(value)
@observable classProperty = value

class Message {
  @observable message = 'Hello world'

  // fictional example, if author is immutable, we just need to store a reference and shouldn't turn it into a mutable, observable object
  // author가 불변의 값이라면, 참조 값만 저장하고 변경가능하고 관찰 가능한 객체로 바꾸면 안된다.
  @observable.ref author = null
}

import { observable, computed } from 'mobx'

class OrderLine {
  @observable price = 0
  @observable amount = 1

  @computed
  get total() {
    return this.price * this.amount
  }
}

observable.object(props, decorators?, options?)

import {observable, autorun, action} from "mobx";

var person = observable({
    // observable properties:
    name: "John",
    age: 42,
    showAge: false,

    // computed property:
    get labelText() {
        return this.showAge ? `${this.name} (age: ${this.age})` : this.name;
    },

    setAge(age) {
        this.age = age;
    }
}, {
  // decorators
    setAge: action
});

// object properties don't expose an 'observe' method,
// but don't worry, 'mobx.autorun' is even more powerful
autorun(() => console.log(person.labelText));

person.name = "Dave";
// prints: 'Dave'

person.setAge(21);
// etc

// plain object
function isPlainObject(value) {
  if (value === null || typeof value !== 'object') return false
  // 지정된 __proto__  타입을 반환한다.
  // __proto__ : 나를 누가 만들었는가.
  // prototype : 나를 이용해서 만들면 해당 prototype을 기반으로 만든다.
  const proto = Object.getPrototypeOf(value)
  return proto === Object.prototype || proto === null
}

observable.array(values?)

var todos = observable([
    { title: "Spoil tea", completed: true },
    { title: "Make coffee", completed: false }
]);

autorun(() => {
    console.log("Remaining:", todos
        .filter(todo => !todo.completed)
        .map(todo => todo.title)
        .join(", ")
    );
});

import { observable } from 'mobx'

const cityName = observable.box('Vienna')

console.log(cityName.get())
// prints 'Vienna'

cityName.observe(function(change) {
  console.log(change.oldValue, '->', change.newValue)
})

cityName.set('Amsterdam')
// prints 'Vienna -> Amsterdam'

import { observable, autorun, action } from 'mobx'

var person = observable(
  {
    name: 'John',
    age: 42,
    showAge: false,

    get labelText() {
      return this.showAge ? `${this.name} (age: ${this.age})` : this.name
    },

    // action:
    setAge(age) {
      this.age = age
    },
  },
  {
    setAge: action,
    // the other properties will default to observables  / computed
  }
)

class Person {
  name = 'John'
  age = 42
  showAge = false

  get labelText() {
    return this.showAge ? `${this.name} (age: ${this.age})` : this.name
  }

  setAge(age) {
    this.age = age
  }
}
// when using decorate, all fields should be specified (a class might have many more non-observable internal fields after all)
decorate(Person, {
  name: observable,
  age: observable,
  showAge: observable,
  labelText: computed,
  setAge: action,
})

class Message {
  @observable message = 'Hello world'

  // fictional example, if author is immutable, we just need to store a reference and shouldn't turn it into a mutable, observable object
  @observable.ref author = null
}

// ES5 syntax:

function Message() {
  extendObservable(
    this,
    {
      message: 'Hello world',
      author: null,
    },
    {
      author: observable.ref,
    }
  )
}

// 예
var person = observable(
  {
    name: 'John',
    age: 42,
    showAge: false,
    author: null,
    get labelText() {
      return this.showAge ? `${this.name} (age: ${this.age})` : this.name
    },

    // action:
    setAge(age) {
      this.age = age
    },
  },
  {
    author: observable.ref, // ref 설정
    setAge: action,
  }
)

reaction(
  () => person.author && person.author.name, // observe
  (value, reaction) => {
    console.log(`author 값이 ${value} 로 바뀌었네요!`)
  }
)

person.author = { name: 'merlin' }
person.author.name = 'ho' // 변화를 감지 못한다.

// author 값이 merlin 로 바뀌었네요!

var person = observable(
  {
    authors: [{ name: 'merlin' }, { name: 'ho' }],
  },
  {
    authors: observable.shallow,
  }
)

autorun(() => console.log(`변화 ${person.authors[0].name}`)) // 2 뎁스에 있는 변화를 감지 하고 싶다.
person.authors[0].name = 'hhhhh'
// 변화를 감지 못한다.
// 대신 아래처럼 authors 배열에 push를 넣으면서 변화를 주면
person.authors.push({ name: 'ererer' })

// test에 변화가 생겼기 때문에 위 autorun이 실행이 되게 된다.

class OrderLine {
  @observable price = 0
  @observable amount = 1

  constructor(price) {
    this.price = price
  }

  @computed
  get total() {
    return this.price * this.amount
  }
}

// or

var upperCaseName = computed(() => name.get().toUpperCase())
var disposer = upperCaseName.observe(change => console.log(change.newValue))

const orderLine = observable.object({
  price: 0,
  amount: 1,
  get total() {
    return this.price * this.amount
  },
  set total(total) {
    this.price = total / this.amount // infer price from total
  },
})

// 동작
@computed
get total() {
  return this.something()
}

something() {}

// 동작 안함
@computed
get total() {
  return this.something()
}

@action
something() {}

import { observable, computed } from 'mobx'
var name = observable.box('John')

var upperCaseName = computed(() => name.get().toUpperCase())

var disposer = upperCaseName.observe(change => console.log(change.newValue))

name.set('Dave')
// prints: 'DAVE'

// Parameterized computed views:
// Create computed's and store them in a cache
import { observable, computed } from "mobx"

class Todos {
  @observable todos = []

  getAllTodosByUser = computedFn(function getAllTodosByUser(userId) {
    return this.todos.filter(todo => todo.user === userId))
  })
}

const disposer = autorun(reaction => {
  /* do some stuff */
})
disposer()

// or

autorun(reaction => {
  /* do some stuff */
  reaction.dispose()
})

var numbers = observable([1,2,3]);
var sum = computed(() => numbers.reduce((a, b) => a + b, 0));

var disposer = autorun(() => console.log(sum.get()));
// prints '6'
numbers.push(4);
// prints '10'

disposer();
numbers.push(5);
// won't print anything, nor is `sum` re-evaluated

when(predicate: () => boolean, effect?: () => void, options?)

async function() {
    await when(() => that.isVisible)
    // etc..
}

reaction(() => data, (data, reaction) => { sideEffect }, options?)

const todos = observable([
  {
    title: 'Make coffee',
    done: true,
  },
  {
    title: 'Find biscuit',
    done: false,
  },
])

// wrong use of reaction: reacts to length changes, but not to title changes!
const reaction1 = reaction(
  () => todos.length,
  length => console.log('reaction 1:', todos.map(todo => todo.title).join(', '))
)

// correct use of reaction: reacts to length and title changes
const reaction2 = reaction(
  () => todos.map(todo => todo.title),
  titles => console.log('reaction 2:', titles.join(', '))
)

// autorun reacts to just everything that is used in its function
const autorun1 = autorun(() =>
  console.log('autorun 1:', todos.map(todo => todo.title).join(', '))
)

todos.push({ title: 'explain reactions', done: false })
// prints:
// reaction 1: Make coffee, find biscuit, explain reactions
// reaction 2: Make coffee, find biscuit, explain reactions
// autorun 1: Make coffee, find biscuit, explain reactions

todos[0].title = 'Make tea'
// prints:
// reaction 2: Make tea, find biscuit, explain reactions
// autorun 1: Make tea, find biscuit, explain reactions

import { observer } from 'mobx-react'

var timerData = observable({
  secondsPassed: 0,
})

setInterval(() => {
  timerData.secondsPassed++
}, 1000)

@observer
class Timer extends React.Component {
  render() {
    return <span>Seconds passed: {this.props.timerData.secondsPassed} </span>
  }
}

ReactDOM.render(<Timer timerData={timerData} />, document.body)

React.render(<Timer timerData={timerData.secondsPassed} />, document.body)

let message = observable({
  title: 'Foo',
  author: {
    name: 'Michel',
  },
  likes: ['John', 'Sara'],
})

autorun(() => {
  console.log(message.title)
})
message.title = 'Bar'
// [mobx.trace] (...)

autorun(() => {
  console.log(message.title)
})
message = observable({ title: 'Bar' })

var title = message.title
autorun(() => {
  console.log(title)
})
message.title = 'Bar'

autorun(() => {
  console.log(message.author.name)
})
message.author.name = 'Sara'
message.author = { name: 'John' }

const author = message.author
autorun(() => {
  console.log(author.name)
})
message.author.name = 'Sara' // 1
message.author = { name: 'John' } // 2

const message = observable({ title: 'hello' })

autorun(() => {
  console.log(message)
})

// Won't trigger a re-run
message.title = 'Hello world'

// 해결책들

autorun(() => {
  console.log(message.title) // clearly, the `.title` observable is used
})

autorun(() => {
  console.log(mobx.toJS(message)) // toJS creates a deep clone, and thus will read the message
})

autorun(() => {
  console.log({ ...message }) // creates a shallow clone, also using `.title` in the process
})

autorun(() => {
  console.log(JSON.stringify(message)) // also reads the entire structure
})

autorun(() => {
  message.likes
})
message.likes.push('Jennifer')

function upperCaseAuthorName(author) {
  const baseName = author.name
  return baseName.toUpperCase()
}
autorun(() => {
  console.log(upperCaseAuthorName(message.author))
})
message.author.name = 'Chesterton'

autorun(() => {
  setTimeout(() => console.log(message.likes.join(', ')), 10)
})
message.likes.push('Jennifer')

const MyComponent = observer(({ message }) => (
  <SomeContainer title={() => <div>{message.title}</div>} />
))

message.title = 'Bar'

const MyComponent = ({ message }) => (
  <SomeContainer
    title={() => <Observer>{() => <div>{message.title}</div>}</Observer>}
  />
)

message.title = 'Bar'

@observer
class MyComponent extends React.component {
  author
  constructor(props) {
    super(props)
    this.author = props.message.author
  }

  render() {
    return <div>{this.author.name}</div>
  }
}

// computed 해결책
@observer
class MyComponent extends React.component {
  @computed
  get author() {
    return this.props.message.author
  }
}

const Message = observer(({ message }) => (
  <div>
    {message.title}
    <Author author={message.author} />
    <Likes likes={message.likes} />
  </div>
))

const Author = observer(({ author }) => <span>{author.name}</span>)

const Likes = observer(({ likes }) => (
  <ul>
    {likes.map(like => (
      <li>{like}</li>
    ))}
  </ul>
))

action(fn)
action(name, fn)
@action classMethod() {}
@action(name) classMethod () {}
@action boundClassMethod = (args) => { body }
@action(name) boundClassMethod = (args) => { body }
@action.bound classMethod() {}

mobx.configure({ enforceActions: 'observed' }) // don't allow state modifications outside actions

class Store {
  @observable githubProjects = []
  @observable state = 'pending' // "pending" / "done" / "error"

  @action
  fetchProjects() {
    this.githubProjects = []
    this.state = 'pending'
    fetchGithubProjectsSomehow().then(
      projects => {
        const filteredProjects = somePreprocessing(projects)
        this.githubProjects = filteredProjects
        this.state = 'done'
      },
      error => {
        this.state = 'error'
      }
    )
  }
}

mobx.configure({ enforceActions: 'observed' })

class Store {
  @observable githubProjects = []
  @observable state = 'pending' // "pending" / "done" / "error"

  @action
  fetchProjects() {
    this.githubProjects = []
    this.state = 'pending'
    fetchGithubProjectsSomehow().then(
      this.fetchProjectsSuccess,
      this.fetchProjectsError
    )
  }

  @action.bound
  fetchProjectsSuccess(projects) {
    const filteredProjects = somePreprocessing(projects)
    this.githubProjects = filteredProjects
    this.state = 'done'
  }

  @action.bound
  fetchProjectsError(error) {
    this.state = 'error'
  }
}

mobx.configure({ enforceActions: 'observed' })

class Store {
  @observable githubProjects = []
  @observable state = 'pending' // "pending" / "done" / "error"

  @action
  fetchProjects() {
    this.githubProjects = []
    this.state = 'pending'
    fetchGithubProjectsSomehow().then(
      // inline created action
      action('fetchSuccess', projects => {
        const filteredProjects = somePreprocessing(projects)
        this.githubProjects = filteredProjects
        this.state = 'done'
      }),
      // inline created action
      action('fetchError', error => {
        this.state = 'error'
      })
    )
  }
}

mobx.configure({ enforceActions: 'observed' })

class Store {
  @observable githubProjects = []
  @observable state = 'pending' // "pending" / "done" / "error"

  @action
  fetchProjects() {
    this.githubProjects = []
    this.state = 'pending'
    fetchGithubProjectsSomehow().then(
      projects => {
        const filteredProjects = somePreprocessing(projects)
        // put the 'final' modification in an anonymous action
        runInAction(() => {
          this.githubProjects = filteredProjects
          this.state = 'done'
        })
      },
      error => {
        // the alternative ending of this process:...
        runInAction(() => {
          this.state = 'error'
        })
      }
    )
  }
}

mobx.configure({ enforceActions: 'observed' })

class Store {
  @observable githubProjects = []
  @observable state = 'pending' // "pending" / "done" / "error"

  @action
  async fetchProjects() {
    this.githubProjects = []
    this.state = 'pending'
    try {
      const projects = await fetchGithubProjectsSomehow()
      const filteredProjects = somePreprocessing(projects)
      // after await, modifying state again, needs an actions:
      runInAction(() => {
        this.state = 'done'
        this.githubProjects = filteredProjects
      })
    } catch (error) {
      runInAction(() => {
        this.state = 'error'
      })
    }
  }
}

mobx.configure({ enforceActions: 'observed' })

class Store {
  @observable githubProjects = []
  @observable state = 'pending'

  fetchProjects = flow(function*() {
    // <- note the star, this a generator function!
    this.githubProjects = []
    this.state = 'pending'
    try {
      const projects = yield fetchGithubProjectsSomehow() // yield instead of await
      const filteredProjects = somePreprocessing(projects)
      // the asynchronous blocks will automatically be wrapped in actions and can modify state
      this.state = 'done'
      this.githubProjects = filteredProjects
    } catch (error) {
      this.state = 'error'
    }
  })
}

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { observable, action, computed } from "mobx";
import { observer } from "mobx-react"; // MobX 에서 사용하는 Provider
import DevTools from "mobx-react-devtools";
 
mobx.configure({ enforceActions: "observed" }) // action 밖에서 state를 변경하는걸 막아준다.
 
const t = new class Temperature {
  @observable unit = "C"
  @observable temperatureCelsius = 25
   
  @computed get temperatureKelvin() {
      console.log("계산 Kelvin")
      return this.temperatureCelsius * (9/5) + 32
  }
    
  @computed get temparatureFahrenheit() {
      console.log("계산 Fahrenheit")
      return this.temperatureCelsius + 273.15
  }
 
   
  @computed get temperature() {
     console.log("계산 temperature")
     switch(this.unit) {
       case "K": return this.temperatureKelvin + "K"
       case "F": return this.temparatureFahrenheit + "F"
       case "C": return this.temperatureCelsius + "C"
     }
  }
 
  @action setUnit(newUnit) {
    this.unit = newUnit
  }
    
  @action setCelsius(degrees) {
    this.temperatureCelsius = degrees
  }
    
  @action('update temperature and unit') // 액션에 문자열을 넣어서 액션이름을 설정 할 수 있다. dev tools에서 확인할 수 있다.
  setTemperatureAndUnit(degrees, unit) {
    this.setCelsius(degrees)
    this.setUnit(unit)
  }
}
 
const App = observer(({temperature}) => (
  <div>
    {temperature.temperature}
  </div>
))
   
ReactDOM.render(
  <App temperature={t} />,
  document.getElementById("root")
)

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { observable, action, computed } from "mobx";
import { observer } from "mobx-react"; // MobX 에서 사용하는 Provider
import DevTools from "mobx-react-devtools";
 
let index = 0
 
mobx.configure({ enforceActions: "observed" })
 
class Temperature {
  @observable id = index++
  @observable unit = "C"
  @observable temperatureCelsius = 25
   
  constructor(degrees, unit) {
    console.log('con')
    this.setTemperatureAndUnit(degrees, unit)
 
  }
   
  @computed get temperatureKelvin() {
      console.log("계산 Kelvin")
      return this.temperatureCelsius * (9/5) + 32
  }
    
  @computed get temparatureFahrenheit() {
      console.log("계산 Fahrenheit")
      return this.temperatureCelsius + 273.15
  }
 
   
  @computed get temperature() {
     console.log("계산 temperature")
     switch(this.unit) {
       case "K": return this.temperatureKelvin + "K"
       case "F": return this.temparatureFahrenheit + "F"
       case "C": return this.temperatureCelsius + "C"
     }
  }
 
  @action setUnit(newUnit) {
    this.unit = newUnit
  }
    
  @action setCelsius(degrees) {
    this.temperatureCelsius = degrees
  }
    
  @action('update temperature and unit')
  setTemperatureAndUnit(degrees, unit) {
    this.setCelsius(degrees)
    this.setUnit(unit)
  }
 
  @action inc() {
    this.setCelsius(this.temperatureCelsius + 1)
  }
}
 
const temps = observable([])
temps.push(new Temperature(20, "K"))
temps.push(new Temperature(25, "F"))
temps.push(new Temperature(20, "C"))
 
 
const App = observer(({temperature}) => (
  <ul>
    {temperature.map(t =>
        <li key={t.id}
            onClick={() => t.inc()}
        >
        {t.temperature}    
        </li>
     )
    }
    <DevTools />
  </ul>
))
 
 
   
 
ReactDOM.render(
  <App temperature={temps} />,
  document.getElementById("root")
)

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { observable, action, computed } from "mobx";
import { observer } from "mobx-react"; // MobX 에서 사용하는 Provider
import DevTools from "mobx-react-devtools";
 
let index = 0;
 
class Temperature {
  id = index++;
  @observable unit = "C";
  @observable temperatureCelsius = 25;
 
  constructor(degrees, unit) {
    this.setTemperatureAndUnit(degrees, unit);
  }
 
  @computed get temperatureKelvin() {
    console.log("계산 Kelvin");
    return this.temperatureCelsius * (9 / 5) + 32;
  }
 
  @computed get temparatureFahrenheit() {
    console.log("계산 Fahrenheit");
    return this.temperatureCelsius + 273.15;
  }
 
  @computed get temperature() {
    console.log("계산 temperature");
    switch (this.unit) {
      case "K":
        return this.temperatureKelvin + "K";
      case "F":
        return this.temparatureFahrenheit + "F";
      case "C":
        return this.temperatureCelsius + "C";
      default:
        return this.temperatureCelsius + "C";
    }
  }
 
  @action setUnit(newUnit) {
    this.unit = newUnit;
  }
 
  @action setCelsius(degrees) {
    this.temperatureCelsius = degrees;
  }
 
  @action("update temperature and unit")
  setTemperatureAndUnit(degrees, unit) {
    this.setCelsius(degrees);
    this.setUnit(unit);
  }
 
  @action inc() {
    this.setCelsius(this.temperatureCelsius + 1);
  }
}
 
const temps = observable([]);
temps.push(new Temperature(20, "K"));
temps.push(new Temperature(25, "F"));
temps.push(new Temperature(20, "C"));
 
const App = observer(({ temperatures }) => (
  <ul>
    {temperatures.map(t => (
      <TView key={t.id} temperature={t} />
    ))}
    <DevTools />
  </ul>
));
 
@observer
class TView extends Component {
  render() {
    const t = this.props.temperature;
    return <li onClick={this.onTemperatureClick}>{t.temperature}</li>;
  }
 
  @action onTemperatureClick = () => {
    this.props.temperature.inc();
  };
}
 
ReactDOM.render(<App temperatures={temps} />, document.getElementById("root"));

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { observable, action, computed, configure } from "mobx";
import { observer } from "mobx-react"; // MobX 에서 사용하는 Provider
import DevTools from "mobx-react-devtools";
 
 
configure({ enforceActions: "observed" }) // action 밖에서 state를 변경하는걸 막아준다.
 
const APPID = "AppKey를 등록해서 쓰세요 ~";
const temps = observable([]);
let index = 0;
 
class Temperature {
  id = index++;
  @observable unit = "C";
  @observable temperatureCelsius = 25;
  @observable location = "Amsterdam, NL";
  @observable loading = true;
  @observable fetchError = false;
  // constructor(degrees, unit) {
  //   this.setTemperatureAndUnit(degrees, unit);
  // }
  constructor(location) {
    this.location = location;
    this.fetch();
  }
 
  @action fetch() {
    window
      .fetch(
        `https://api.openweathermap.org/data/2.5/weather?appid=${APPID}&q=${
          this.location
        }`
      )
      .then(res => res.json(), action(err => (this.fetchError = true)))
      .then(
        action(json => {
           console.log(json)
          this.temperatureCelsius = json.main.temp - 273.15;
          this.loading = false;
        })
      );
  }
  @computed get temperatureKelvin() {
    console.log("계산 Kelvin");
    return this.temperatureCelsius * (9 / 5) + 32;
  }
 
  @computed get temparatureFahrenheit() {
    console.log("계산 Fahrenheit");
    return this.temperatureCelsius + 273.15;
  }
 
  @computed get temperature() {
    console.log("계산 temperature");
    switch (this.unit) {
      case "K":
        return this.temperatureKelvin + "K";
      case "F":
        return this.temparatureFahrenheit + "F";
      case "C":
        return this.temperatureCelsius + "C";
      default:
        return this.temperatureCelsius + "C";
    }
  }
 
  @action setUnit(newUnit) {
    this.unit = newUnit;
  }
 
  @action setCelsius(degrees) {
    this.temperatureCelsius = degrees;
  }
 
  @action("update temperature and unit")
  setTemperatureAndUnit(degrees, unit) {
    this.setCelsius(degrees);
    this.setUnit(unit);
  }
 
  @action inc() {
    this.setCelsius(this.temperatureCelsius + 1);
  }
}
 
 
 
const App = observer(({ temperatures }) => (
  <ul>
    <TemperatureInput temperatures={temperatures} />
    {temperatures.map(t => (
      <TView key={t.id} temperature={t} />
    ))}
    <DevTools />
  </ul>
));
 
@observer
class TemperatureInput extends Component {
  @observable input = "";
 
  render() {
    return (
      <li>
        Destination:
        <input onChange={this.onChange} value={this.input} />
        <button onClick={this.onSubmit}>Add</button>
      </li>
    );
  }
 
  @action onChange = e => {
    this.input = e.target.value;
  };
 
  @action onSubmit = e => {
    this.props.temperatures.push(new Temperature(this.input));
    this.input = "";
  };
}
 
@observer
class TView extends Component {
  render() {
    const t = this.props.temperature;
    return t.fetchError ? (
      "fetch 에러.. "
    ) : (
      <li onClick={this.onTemperatureClick}>
        {t.location}: {t.loading ? "loading.." : t.temperature}
      </li>
    );
  }
 
  @action onTemperatureClick = () => {
    this.props.temperature.inc();
  };
}
 
ReactDOM.render(<App temperatures={temps} />, document.getElementById("root"));

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { observable, action, computed, configure, when } from "mobx";
import { observer, Provider, inject } from "mobx-react"; // MobX 에서 사용하는 Provider
import DevTools from "mobx-react-devtools";

configure({ enforceActions: "observed" }); // action 밖에서 state를 변경하는걸 막아준다.

const APPID = "등록해서 쓰세욥"
const temps = observable([]);
let index = 0;

class Temperature {
  id = index++;
  @observable unit = "C";
  @observable temperatureCelsius = 25;
  @observable location = "Amsterdam, NL";
  @observable loading = true;
  @observable fetchError = false;
  // constructor(degrees, unit) {
  //   this.setTemperatureAndUnit(degrees, unit);
  // }
  constructor(location) {
    this.location = location;
    this.fetch();
  }

  @action fetch() {
    window
      .fetch(
        `https://api.openweathermap.org/data/2.5/weather?appid=${APPID}&q=${
          this.location
        }`
      )
      .then(res => res.json(), action(err => (this.fetchError = true)))
      .then(
        action(json => {
          console.log(json);
          this.temperatureCelsius = json.main.temp - 273.15;
          this.loading = false;
        })
      );
  }
  @computed get temperatureKelvin() {
    console.log("계산 Kelvin");
    return this.temperatureCelsius * (9 / 5) + 32;
  }

  @computed get temparatureFahrenheit() {
    console.log("계산 Fahrenheit");
    return this.temperatureCelsius + 273.15;
  }

  @computed get temperature() {
    console.log("계산 temperature");
    switch (this.unit) {
      case "K":
        return this.temperatureKelvin + "K";
      case "F":
        return this.temparatureFahrenheit + "F";
      case "C":
        return this.temperatureCelsius + "C";
      default:
        return this.temperatureCelsius + "C";
    }
  }

  @action setUnit(newUnit) {
    this.unit = newUnit;
  }

  @action setCelsius(degrees) {
    this.temperatureCelsius = degrees;
  }

  @action("update temperature and unit")
  setTemperatureAndUnit(degrees, unit) {
    this.setCelsius(degrees);
    this.setUnit(unit);
  }

  @action inc() {
    this.setCelsius(this.temperatureCelsius + 1);
  }
}


const App = inject(({temperatures}) => ({
  temperatures
}))(observer(({ temperatures }) => (
  <ul>
    <TemperatureInput />
    {temperatures.map(t => (
      <TView key={t.id} temperature={t} />
    ))}
    <DevTools />
  </ul>
)))

@inject(({temperatures}) => ({
  temperatures
}))
@observer
class TemperatureInput extends Component {
  @observable input = "";

  render() {
    return (
      <li>
        Destination:
        <input onChange={this.onChange} value={this.input} />
        <button onClick={this.onSubmit}>Add</button>
      </li>
    );
  }

  @action onChange = e => {
    this.input = e.target.value;
  };

  @action onSubmit = e => {
    this.props.temperatures.push(new Temperature(this.input));
    this.input = "";
  };
}

@observer
class TView extends Component {
  render() {
    const t = this.props.temperature;
    return t.fetchError ? (
      "fetch 에러.. "
    ) : (
      <li onClick={this.onTemperatureClick}>
        {t.location}: {t.loading ? "loading.." : t.temperature}
      </li>
    );
  }

  @action onTemperatureClick = () => {
    this.props.temperature.inc();
  };
}

ReactDOM.render(
  <Provider temperatures={temps}>
    <App />
  </Provider>,
  document.getElementById("root")
);


function isNice(t) {
  return t.temperatureCelsius > 25
}
// 한번만 실행
when(
  () => temps.some(isNice),
  () => {
    const t = temps.find(isNice)
    alert(`Book now!! ${t.location}`)
  }
)

import {observable, computed, asStructure} from 'mobx';
import jquery from 'jquery';

export class UiState {
    @observable language = "en_US";
    @observable pendingRequestCount = 0;

    // .struct makes sure observer won't be signaled unless the
    // dimensions object changed in a deepEqual manner
    @observable.struct windowDimensions = {
        width: jquery(window).width(),
        height: jquery(window).height()
    };

    constructor() {
        jquery.resize(() => {
            this.windowDimensions = getWindowDimensions();
        });
    }

    @computed get appIsInSync() {
        return this.pendingRequestCount === 0
    }
}

import {observable, autorun} from 'mobx';
import uuid from 'node-uuid';

export class TodoStore {
    authorStore;
    transportLayer;
    @observable todos = [];
    @observable isLoading = true;

    constructor(transportLayer, authorStore) {
        this.authorStore = authorStore; // Store that can resolve authors for us
        this.transportLayer = transportLayer; // Thing that can make server requests for us
        this.transportLayer.onReceiveTodoUpdate(updatedTodo => this.updateTodoFromServer(updatedTodo));
        this.loadTodos();
    }

    /**
     * Fetches all todos from the server
     */
    loadTodos() {
        this.isLoading = true;
        this.transportLayer.fetchTodos().then(fetchedTodos => {
            fetchedTodos.forEach(json => this.updateTodoFromServer(json));
            this.isLoading = false;
        });
    }

    /**
     * Update a todo with information from the server. Guarantees a todo
     * only exists once. Might either construct a new todo, update an existing one,
     * or remove a todo if it has been deleted on the server.
     */
    updateTodoFromServer(json) {
        var todo = this.todos.find(todo => todo.id === json.id);
        if (!todo) {
            todo = new Todo(this, json.id);
            this.todos.push(todo);
        }
        if (json.isDeleted) {
            this.removeTodo(todo);
        } else {
            todo.updateFromJson(json);
        }
    }

    /**
     * Creates a fresh todo on the client and server
     */
    createTodo() {
        var todo = new Todo(this);
        this.todos.push(todo);
        return todo;
    }

    /**
     * A todo was somehow deleted, clean it from the client memory
     */
    removeTodo(todo) {
        this.todos.splice(this.todos.indexOf(todo), 1);
        todo.dispose();
    }
}

export class Todo {

    /**
     * unique id of this todo, immutable.
     */
    id = null;

    @observable completed = false;
    @observable task = "";

    /**
     * reference to an Author object (from the authorStore)
     */
    @observable author = null;

    store = null;

    /**
     * Indicates whether changes in this object
     * should be submitted to the server
     */
    autoSave = true;

    /**
     * Disposer for the side effect that automatically
     * stores this Todo, see @dispose.
     */
    saveHandler = null;

    constructor(store, id=uuid.v4()) {
        this.store = store;
        this.id = id;

        this.saveHandler = reaction(
            // observe everything that is used in the JSON:
            () => this.asJson,
            // if autoSave is on, send json to server
            (json) => {
                if (this.autoSave) {
                    this.store.transportLayer.saveTodo(json);
                }
            }
        );
    }

    /**
     * Remove this todo from the client and server
     */
    delete() {
        this.store.transportLayer.deleteTodo(this.id);
        this.store.removeTodo(this);
    }

    @computed get asJson() {
        return {
            id: this.id,
            completed: this.completed,
            task: this.task,
            authorId: this.author ? this.author.id : null
        };
    }

    /**
     * Update this todo with information from the server
     */
    updateFromJson(json) {
        // make sure our changes aren't sent back to the server
        this.autoSave = false;
        this.completed = json.completed;
        this.task = json.task;
        this.author = this.store.authorStore.resolveAuthor(json.authorId);
        this.autoSave = true;
    }

    dispose() {
        // clean up the observer
        this.saveHandler();
    }
}