Instantly share code, notes, and snippets.
CreatedJune 15, 2017 11:09
Save benjick/c48dd2db575e79c7b0b1043de4556ebc to your computer and use it in GitHub Desktop.
mobx-state-tree persist PoC
Took some inspiration fromhttps://github.com/pinqy520/mobx-persist to try this out
Usage:
import{types}from'mobx-state-tree';importmomentfrom'moment';import{AsyncStorage}from'react-native';import{persist}from'./persist';constStore=types.model('Store',{date:'1989-06-01',hydrated:false,getage(){constbirthday=moment(this.date);returnmoment().diff(birthday,'years');},},{setDate(date){this.date=date;},afterHydration(){// This lifecycle is called after the store is hydratedthis.hydrated=true;console.log('I feel refreshed!');},});conststore=Store.create();persist('@MyStoreKey',store,{storage:AsyncStorage,// AsyncStorage for React-Native, localStorage for webjsonify:true,// Set to true if using AsyncStorage},{date:true,// which keys to persist});exportdefaultstore;
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.Learn more about bidirectional Unicode characters
| /* globals localStorage */ | |
| import{onSnapshot,applySnapshot}from'mobx-state-tree'; | |
| importStoragefrom'./storage'; | |
| exportconstpersist=(name,store,options,schema={})=>{ | |
| lethydrated=false; | |
| letstorage=options.storage; | |
| if(typeoflocalStorage!=='undefined'&&localStorage===storage){ | |
| storage=Storage; | |
| } | |
| onSnapshot(store,(_snapshot)=>{ | |
| if(!hydrated){ | |
| return; | |
| } | |
| constsnapshot={ ..._snapshot}; | |
| Object.keys(snapshot).forEach((key)=>{ | |
| if(!schema[key]){ | |
| deletesnapshot[key]; | |
| } | |
| }); | |
| constdata=!options.jsonify ?snapshot :JSON.stringify(snapshot); | |
| storage.setItem(name,data); | |
| }); | |
| storage.getItem(name) | |
| .then((data)=>{ | |
| if(data){ | |
| constsnapshot=!options.jsonify ?data :JSON.parse(data); | |
| applySnapshot(store,snapshot); | |
| if(store.afterHydration&&typeofstore.afterHydration==='function'){ | |
| store.afterHydration(); | |
| } | |
| hydrated=true; | |
| } | |
| }); | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.Learn more about bidirectional Unicode characters
| /* globals window */ | |
| // Borrowed from https://raw.githubusercontent.com/pinqy520/mobx-persist/8d68e5b50575feec8a44cd0db7313d08d96d2255/lib/storage.js | |
| exportfunctionclear(){ | |
| returnnewPromise((resolve,reject)=>{ | |
| try{ | |
| window.localStorage.clear(); | |
| resolve(null); | |
| }catch(err){ | |
| reject(err); | |
| } | |
| }); | |
| } | |
| exportfunctiongetItem(key){ | |
| returnnewPromise((resolve,reject)=>{ | |
| try{ | |
| constvalue=window.localStorage.getItem(key); | |
| resolve(value); | |
| }catch(err){ | |
| reject(err); | |
| } | |
| }); | |
| } | |
| exportfunctionremoveItem(key){ | |
| returnnewPromise((resolve,reject)=>{ | |
| try{ | |
| window.localStorage.removeItem(key); | |
| resolve(null); | |
| }catch(err){ | |
| reject(err); | |
| } | |
| }); | |
| } | |
| exportfunctionsetItem(key,value){ | |
| returnnewPromise((resolve,reject)=>{ | |
| try{ | |
| window.localStorage.setItem(key,value); | |
| resolve(null); | |
| }catch(err){ | |
| reject(err); | |
| } | |
| }); | |
| } |
ccfiel commentedApr 18, 2018
have you used it in production? :)
agilgur5 commentedMay 24, 2019 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
@ccfiel I used it in production and itmostly worked, but required one change, moving thehydrated = true statement to outside of theif (data) block (otherwise hydrated will never be set to true because there is no data initially persisted).
agilgur5 commentedMay 24, 2019 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
I recently createdmst-persist with inspiration from this gist,mobx-persist, andredux-persist as a standalone library to handle persistence with MST. Check it out and report any issues or contribute! :)
Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment