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 notnew 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
.
Note
Dependency injection does not support circular references
Do not allow circular dependencies between store and action, It's impossible to do like this:
class A {
@inject(B) b
}
class B {
@inject(A) a
}
Do not deconstruct to the last level on dynamic object
const obj = observable({ a: 1 })
// good
obj.a = 5
// bad
let { a } = obj
a = 5