react-mobx

react-mobx.carbide.md

react-mobx

This Gist was automatically created by Carbide, a free online programming environment.

You can view a live, interactive version of this Gist here.(http://alpha.trycarbide.com/anonymous/5e37d0d0105948af2d7215a299ccf46a).

actions.js

import { counter, message } from './states'

export function increment () {
    if (counter.count >= 5) {
        message.setText('over 10')
    } else {
        message.setText()
        counter.addCount(1)
    }
}

export function decrement () {
    message.setText()
    counter.addCount(-1)
}

export function reset () {
    message.setText('reset')
    counter.setCount(0)
}

containers.js

import React, { Component } from 'react'
import { observer } from 'mobx-react'
import { counter, message } from './states'
import { increment, decrement, reset } from './actions'

@observer
class Root extends Component {
	render() {
        return <div>
            <div>count is {counter.count}</div>
            <input type='button' value='increment' onClick={increment}/>
            <input type='button' value='decrement' onClick={decrement}/>
            <input type='button' value='reset' onClick={reset}/>
            <div>{message.text}</div>
		</div>
	}
}a

export { Root }

main.js

import React from 'react' 
import { render } from 'react-dom'
import { Root } from './containers.js'

render(<Root/>, document.querySelector('#root'))

states.js

import { observable } from 'mobx'

class Counter {
	@observable count
    constructor () {
        this.count = 0
    }
	addCount (n) {
        this.count += n
    }
	setCount (n) {
        this.count = n
    }
}

const counter = new Counter

class Message {
	@observable text
    constructor () {
        this.text = ''
    }
	setText (n = '') {
        this.text = n
    }
}

const message = new Message

export { counter, message }