dob

Dob ·

dob

Dob is a tool for monitoring object changes. Using Proxy.

Online Docs.

Examples

There are some demo on fiddle. Here's the simplest:

import { observable, observe } from "dob"

const obj = observable({ a: 1 })

observe(() => {
    console.log("obj.a has changed to", obj.a)
}) // <· obj.a has changed to 1

obj.a = 2 // <· obj.a has changed to 2

You can enjoy the benefits of proxy, for example obj.a = { b: 5 } is effective.

Use in react

import { Action, observable, combineStores, inject } from 'dob'
import { Provider, Connect } from 'dob-react'

@observable
export class UserStore {
    name = 'bob'
}

export class UserAction {
    @inject(UserStore) private UserStore: UserStore;

    @Action setName () {
        this.store.name = 'lucy'
    }
}

@Connect
class App extends React.Component {
    render() {
        return (
            <span onClick={this.props.UserAction.setName}>
                {this.props.UserStore.name}
            </span>
        )
    }
}

ReactDOM.render(
    <Provider {
        ...combineStores({
            UserStore,
            UserAction
        })
    }>
        <App />
    </Provider>
, document.getElementById('react-dom'))

Use inject to pick stores in action, do not new UserStore(), it's terrible for later maintenance.

Project Examples

• dob-react simple example
• dob-react hackernews
• dob-react todoMVC
• dob-react complex online web editor
• dob-redux todoMVC

Ecosystem

• dob-react - Connect dob to react! Here is a basic demo, and here is a demo with fractal. Quick start.
• dob-react-devtools - Devtools for dob-react, with action and ui two way binding.
• dob-redux - You can use both dob and Redux by using it! Enjoy the type and convenience of dob, and the ecology of Redux.
• dob-refect - Auto fetch, away from the trouble of componentDidUpdate.

Inspired

• mobx
• nx-js