I have a MobX-Store setup with makeAutoObservable(this)
. I would expect this to mark the methods that write to observable state as actions. Yet that does not seem to be the case. Here's what I did:
I created the following class:
class ModalState {
opened = false
constructor() {
makeAutoObservable(this)
}
open() {
this.opened = true
}
}
let modalState: ModalState
export function getModalState() {
if (!modalState)
modalState = new ModalState()
return modalState
}
Then I try to use it to control my modal like this:
const MyModal = observer(() => {
const [modalState] = useState(() => getModalState())
return (
<Modal opened={modalState.opened} onClose={modalState.close}>
...
</Modal>
)
})
However, this invocation of modalState.close
does not count as an action, which I know because the modal does not actually close when I click the close button. To fix it, I have to change the class like this:
const MyModal = observer(() => {
const [modalState] = useState(() => getModalState())
const close = action(() => modalState.close())
return (
<Modal opened={modalState.opened} onClose={close}>
...
</Modal>
)
})
Which works, but then what is the point of makeAutoObservable
? I thought I could mark methods of the store as actions, so that I can then use them as normal in the rest of my code without having to wrap them in actions every time I want the store to change.
Is there a way to make actions on a store invokable directly, like the first version of MyModal
?