dob

Dob ·

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

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.

Installation

Dob is available as the dob package on npm. It is also available on a CDN.

npm i dob

Project Examples

• React application example with dob

Apis

You can read quick start first, then read them:

• observable, observe
• unobserbe
• Action

Combination

Combining dob-react

Quick start

Here is a basic demo, and here is a demo with fractal.

Combining react-redux

Here is a basic demo

• createReduxStore
• task

You can clone this project, and run npm start to see redux todoMVC demo.

Debug in console

import { startDebug, stopDebug, useStrict, dobEvent } from 'dob'

// start debug
startDebug()

// you can receive debug info from dobEvent
dobEvent.on("debug", debugInfo: IDebugInfo => {

})

// end debug
stopDebug()

The debug mode prints the trigger timing and assignment steps for all the @Action functions.

Looking for debug details.

demo

Inspired

• mobx
• nx-js