Dob is a tool for monitoring object changes. Using Proxy. Online Docs.
CircleCI Status NPM Version Code Coverage
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.
import { Action, observable, combineStores, inject } from "dob"; import { Connect } from "dob-react"; @observable export class UserStore { name = "bob"; } export class UserAction { @inject(UserStore) userStore: UserStore; @Action setName() { this.userStore.name = "lucy"; } } @Connect( combineStores({ UserStore, UserAction }) ) class App extends React.Component { render() { return ( <span onClick={this.props.UserAction.setName}> {this.props.UserStore.name} </span> ); } }
Use
injectto pick stores in action, do notnew UserStore(), it's terrible for later maintenance.
import { Action, observable, combineStores, inject } from "dob"; import { Provider, Connect } from "dob-react"; @observable export class UserStore { name = "bob"; } export class UserAction { @inject(UserStore) userStore: UserStore; @Action setName() { this.userStore.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") );
- dob-react simple example
- dob-react hackernews
- dob-react todoMVC
- dob-react complex online web editor
- dob-redux todoMVC
- 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.
Talk to us about dob using DingDing.
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; }
const obj = observable({ a: 1 }); // good obj.a = 5; // bad let { a } = obj; a = 5;