Awesome Open Source
Awesome Open Source

Dob

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

CircleCI Status NPM Version Code Coverage

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 component

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 inject to pick stores in action, do not new UserStore(), it's terrible for later maintenance.

Use in react project

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")
);

Project Examples

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.

Communication

Talk to us about dob using DingDing.

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;

Inspired

Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Reactjs (164,328
Redux (28,074
Proxy (24,694
Devtools (6,257
Observable (3,554
Observer (2,671
Todomvc (1,048
Observe (21
Dynamic Objects (9
Dob (4