Introduction



dob is a tool for monitoring object changes by using Proxy.

CircleCI Status npm version code coverage

npm

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { observable, observe } from "dob"

// 1. Create an observabled obj, and store runCount
const obj = observable({ })
let runCount = 0

// 2. Observe obj.text
observe(() => {
    runCount++
    document.write(`text: ${obj.text} & runCount: ${runCount}`)
})

// 3. Change obj.text, and observe's callback will execute
function changeText(value) {
    obj.text = value
}

// 4. Change obj.name, but step 2 not use it, so nothing happened
function changeName(value) {
    obj.name = value
}

Look at the above results, if the changed field obj.text is used in the observer‘s callback, change it will re-execute this function, but obj.name is not used, so it will not re-execute when change it.

As you can see, even if you modify a property without a preset value, it still works.

Using dob with react

dob-react can bind dob to React, read For react for more information.

dob-react-devtools is a good library to help you debug code written by dob.

Using both dob and redux

If you want to use functional development, as well as redux-devtools, but tired of immutable tedious usage, you can now use mutable methods to replace immutable wording.

dob-redux can bind dob to Redux. You can keep using react-redux and all the redux ecology.

If dob-react is used, there is no need to use dob-redux, it’s only offered as another development idea.