A MobX action marks code that changes observable state. Wrap a state-changing function with action(...) so updates occur in code MobX permits to mutate observable values. section 5.1.4 section 7.1
Use actions at the boundary where an event or asynchronous callback changes state. In a reactive editor, clicking a value changes editState.inEdit; after editState is observable, an observing component can react to that change. section 5.1.4 section 5.1.4
Common action placements include:
- A React event handler that starts editing by setting an observable inEdit property. section 5.1.4
- A DOM mousedown listener that clears selection.selected when the click is outside a selectable element. section 6.2.2
- A fetch promise callback that stores received JSON in state.ast. section 7.1
Marking a click handler
Import action from mobx and wrap the callback assigned to onClick. The callback can then set editState.inEdit = true; an observer-wrapped TextValue renders an input when that property is true. section 5.1.4 section 5.1.4
import { action, observable } from "mobx" #1
const apiUrl = "http://localhost:8080/contents"
fetch(apiUrl)
.then((response) => response.json())
.then(action((json) => { #2
state.ast = json
})) #3
This callback receives fetched JSON and assigns it to the observable ast property inside action(...), allowing the app to render state loaded from the backend. section 7.1
