# MobX decorators
Several helper MobX decorators
MobX 5 is not supported yet
Installation
npm install --save mobx-decorators
You also should use some transpiler (like babel).
npm install --save-dev @babel/plugin-proposal-decorators
Decorators
@setter
@setter@@@@
Create setter for property
with setProperty
or custom name.
If constValue
provided this value will be set every time setter called.
You can also provide transform function.
With transformFn
function you can change value that will be set.
@setter @observable loggedIn = false; const user = ;user; // user.loggedIn = true
@ @observable loggedIn = false; const user = ;user; // user.loggedIn = true
@ @ @observable loggedIn = false; const user = ;user; // user.loggedIn = trueuser; // user.loggedIn = false
@ @observable name; const user = ;user; // user.name = 'ALICE'
@toggle
@toggle@
Toggle boolean property (property = !property
).
@toggle @observable loggedIn = false; const user = ;user; // user.loggedIn = !user.loggedIn
@ @observable loggedIn = false; const user = ;user; // user.loggedIn = !user.loggedIn
@observe
@@
onChanged
will be called after property change.
If invokeBeforeFirstAccess
is true
handler will be called one time before
property first access (set or get).
More info can be found in mobx docs
@ @setter @observable loggedIn = false; const user = ;user; // console.log(true)
@ @setter @observable loggedIn = false; const user1 = ;const loggedIn = userloggedIn; // console.log(false)user1; // console.log(true) const user2 = ;user2; // console.log(false) // console.log(true)
@intercept
@
onWillChange
will be called before property change.
You can replace value or cancel change in handler.
More info can be found in mobx docs
@ @setter @observable loginCount = 0; const user = ;user; // user.loginCount = 999;
@ @setter @observable loginCount = 0; const user = ;user; // user.loginCount = 0;
@_interceptReads
@
interceptReads renamed in Mobx4 and look like will be deprecated
onRead
will be called before property reading.
You can transform value in handler.
More info can be found in mobx CHANGELOG
@ @observable name = 'Alice'; const user = ;console // ALICE
@save
@save@
(!) TypeScript: you can't use class property initializers (class F {prop = 1}
) with @save decorator
@save
decorator helps save and load observable value to/from permanent
storage. Keep in mind @save
is lazy decorator and loading will be started
only after first property access. If you change property before or during
loading than restored value will be ignored.
onLoaded
callback will be called only if value is loaded from storage.
onSave
will be called after saving.
onInitialized
will be called after loading attempt independent of the result.
By default values saved as json
. In some cases (Date
for example) you should
provide serializer
(see example with date).
You must define storeName
property in store (see examples) or pass it as
option. storeName
option can be string or function.
Default storage is localStorage
for browser, AsyncStorage
for React Native and memory for other platforms. You can specify you own
(localForage for example)
by storage
option. Storage must realize simple interface
(functions are async or return Promise):
const MyStorage = async { // return item } async { // save item }
If you need to pass the same options (storage for example) to @save
decorator
of several properties than you can use createSaveDecorator
function.
storeName = 'user'; @save @observable loginCount; const user = ;console; // undefined// @save will try to load loginCount from storage but// loading is async (!) so value is still undefined here
storeName = 'user'; // storage contains 999 for loginCount property @ @setter @observable loginCount; const user = ;console; // undefined, loading loginCount // throw some timeconsole; // 999 user; // 1000 will be saved to storage
@ @observable loginCount; @ @observable group; const user = ;console; // undefined, loading loginCountconsole; // undefined, loading group
storeName = 'user'; @ @observable lastLogin; const user = ;console;
const mysave = ; @mysave @observable loginCount; @save @observable name; const user = ;console;
const mysave = ; @ @observable loginCount; @save @observable name; const user = ;console;
@allObservable
@allObservable@
Class decorator that makes all properties observable. Use only
for
whitelisting properties and except
for blacklisting.
@allObservable name = 'unknown'; loginCount = 0;
@ name = 'unknown'; loginCount = 0;
@ name = 'unknown'; loginCount = 0;