Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dobjs/dob
Light and fast 🚀 state management tool using proxy.
https://github.com/dobjs/dob
dob dynamic dynamic-object observable observe observer proxy react
Last synced: about 2 months ago
JSON representation
Light and fast 🚀 state management tool using proxy.
- Host: GitHub
- URL: https://github.com/dobjs/dob
- Owner: dobjs
- License: mit
- Created: 2017-02-27T13:52:31.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-12-17T15:26:29.000Z (almost 6 years ago)
- Last Synced: 2024-07-09T17:57:49.026Z (3 months ago)
- Topics: dob, dynamic, dynamic-object, observable, observe, observer, proxy, react
- Language: TypeScript
- Homepage: https://dobjs.github.io/dob-docs/
- Size: 581 KB
- Stars: 729
- Watchers: 19
- Forks: 34
- Open Issues: 2
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-state-management - dob - Light and fast state management tool using proxy. (List)
README
Dob
Dob is a tool for monitoring object changes. Using Proxy. Online Docs.
## Examples
There are some [demo](https://jsfiddle.net/1q772uL0/20/) on fiddle. Here's the simplest:
```typescript
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
```typescript
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 (
{this.props.UserStore.name}
);
}
}
```
> Use `inject` to pick stores in action, do not `new UserStore()`, it's terrible for later maintenance.
## Use in react project
```typescript
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 (
{this.props.UserStore.name}
);
}
}
ReactDOM.render(
,
document.getElementById("react-dom")
);
```
## Project Examples
* [dob-react simple example](https://github.com/ascoders/dob-example)
* [dob-react hackernews](https://github.com/dobjs/dob-react-hackernews)
* [dob-react todoMVC](https://github.com/dobjs/dob-react-todomvc)
* [dob-react complex online web editor](https://github.com/ascoders/gaea-editor)
* [dob-redux todoMVC](https://github.com/dobjs/dob-redux-todomvc)
## Ecosystem
* [dob-react](https://github.com/dobjs/dob-react) - Connect dob to react! Here is a basic [demo](https://jsfiddle.net/yp90Lep9/21/), and here is a [demo](https://jsfiddle.net/g19ehhgu/11/) with fractal. [Quick start](./docs/dob-react.md).
* [dob-react-devtools](https://github.com/dobjs/dob-react-devtools) - Devtools for dob-react, with action and ui two way binding.
* [dob-redux](https://github.com/dobjs/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:
```typescript
class A {
@inject(B) b;
}
class B {
@inject(A) a;
}
```
### Do not deconstruct to the last level on dynamic object
```typescript
const obj = observable({ a: 1 });
// good
obj.a = 5;
// bad
let { a } = obj;
a = 5;
```
## Inspired
* [mobx](https://github.com/mobxjs/mobx)
* [nx-js](https://github.com/nx-js/observer-util)