rescript-mobx-react

rescript-mobx-react

Mobx and mobx-react-lite bindings for rescript.

Adding dependencies

npm install rescript @rescript/react -D

npm install mobx mobx-react-lite -S

Installation

npm install rescript-mobx-react -D

Adding bs-dependencies

{
  ...
  "bs-dependencies": [
+    "@rescript/react",
+    "rescript-mobx-react"
  ]
}

usage

• observable

1. Use observable API with Record In Rescript,we use Record within mutable field,so that we can update those fields in-place.

type myObservableRecord = {
    mutable count: int
}
let observableCount: myObservableRecord = Mobx.observable({count: 0})
observableCount.count = observableCount.count + 1

2. Use observable API with ref

let observableState = Mobx.observable(ref(0))
observableState := observableState.contents + 1

3. Use observable API with Array

let observableArray = Mobx.observable([1,2,3,4])
observableArray->Js.Array2.push(5)->ignore

4. Use observable API with Rescript mutable collections.

let queue: Belt.MutableQueue.t<int> = Belt.MutableQueue.make()
let observableQueue = Mobx.observable(queue)
observableQueue->Belt.MutableQueue.add(1)

• observableBox

If you want to make a primitive observable types directly,you can use Mobx.observableBox

let box = Mobx.observableBox(0)
box.set(. box.get(.) + 1)

• Make observable react component

@react.component
let make = Mobx.observer(() => {
    <>
        <p>{observableCount.count->React.int}</p>
    </>
})

• action

Modify the observable value in action callback function

let increase = Mobx.action(() => {
    observableCount.count = observableCount.count + 1
})
increase()

• computed

Get the computed value of the observable.

let double = Mobx.computed(() => {
    observableCount.count * 2
}).get()

• Reaction API:
• 1. autorun
• 2. when_
• 3. autorun0 (with configs)
• 4. when0 (with configs)