Native AsyncStorage에 대응하기 위해 MobX 저장소를 저장하고로드하기위한 최적의 패턴은 무엇입니까?

Question

MobX를 사용하여 React Native 앱을 보유하고 있습니다. 내 저장소에는 기본 개체가 있고 사용자가 작업 (Options.js 파일에서)을 사용하여 값을 업데이트하면 다음에이 응용 프로그램을 열 때이 로컬 (React Native의 AsyncStorage)을 저장하고 싶습니다. 기본값으로 재설정되지 않습니다. 첫 번째 실행시이를 처리하고 새로운 값을 확인하고로드하는 데 좋은 패턴은 무엇입니까?

내 RootStore.js은 다음과 같습니다 : 나는 내 반작용 네이티브 응용 프로그램을 모두 사용하고 기본 패턴을 포함하도록 파일을 업데이트 한

import { observable, action } from 'mobx'; 

export default class RootStore { 
    constructor() { 
    this.sources = new Sources(this); 
    } 
} 

class Sources { 
    constructor(rootStore) { 
    this.rootStore = rootStore; 
    } 
    @observable 
    left = [ 
    { 
     active: 'yes', 
     side: 'value One', 
     name: 'value Two', 
    }, 
    ]; 
//passing in new object from Options.js 
    @action 
    updateActiveLeft(data) { 
    let object = data; 
    this.left = object; 
    console.log('New active name set in store - ' + this.left[0].name); 
    } 

Answer 1

. 비동기 호출을 처리하기 위해 async/await 구문을 사용하고 있지만 약속이나 원하는 패턴을 사용할 수 있습니다. 모든 로컬 API를 처리하기위한 DRY 클래스로 만들 수도 있습니다.

EDIT : 컴파일 오류가 수정되고 updateStore() 메소드가 추가되었습니다.

import { observable, action, toJS } from 'mobx'; 
import { AsyncStorage } from 'react-native'; 
import _ from 'lodash'; 

export default class RootStore { 
    constructor() { 
    this.sources = new Sources(this); 
    // You can move this to your App.js class when your app 
    // for more control but this will start loading your data 
    // as soon as RootStore is created. 
    this.sources.refreshStores(); 
    } 
} 

class Sources { 

    @observable 
    left = [ 
    { 
     active: 'yes', 
     side: 'value One', 
     name: 'value Two', 
    }, 
    ]; 

    //passing in new object from Options.js 
    @action 
    updateActiveLeft(data) { // May want to make this a promise or async 
    let object = data; 
    // this.left = object; // Now using updateStore to set MobX obs 
    this.updateStore(toJS(object)).then(() => { 
     console.log('Data is now saved in AsyncStorage.') 
    }); 
    } 

    /** 
    * Set async data to local memory 
    * @param newdata {object} An updated store abject 
    */ 
    @action 
    updateStore = async (newdata) => { 
    try { 
     const AppData = newdata; 
     // Set MobX observables with new data 
     _.forEach(AppData, (value, key) => { 
     this[key] = value; 
     }); 
     // Set AsyncStorage 
     await AsyncStorage.setItem('app', JSON.stringify(AppData)); 
    } catch(e) { 
     console.log('Could not update app store. [store/App]') 
    } 
    } 

    /** 
    * Set MobX data from AsyncStorage 
    */ 
    @action 
    refreshStores = async() => { 
    try { 
     const RootStore = await this.getStore(); 
     // I store my data in AsyncStorage exactly the same way I store my observables 
     // so that when I recall them I can just iterate through my object or array 
     // and set them easily to MobX observables. 
     _.forEach(RootStore, (value, key) => { 
     this[key] = value; 
     }); 
    } catch(e) { 
     console.log('Could not refresh app store.'); 
    } 
    } 

    /** 
    * Retrieve data from AsyncStorage 
    */ 
    @action 
    getStore = async() => { 
    try { 
     // I'm just using RootStore as a storage key name but you can use whatever you want. 
     // I'm also shortcircuiting the call to async to be replaced with the default values 
     // in case the store doesn't exist. 
     let RootStore = await AsyncStorage.getItem('RootStore') || JSON.stringify(toJS(this)); 
     RootStore = JSON.parse(RootStore); 
     return RootStore; 
    } catch(e) { 
     console.log('Could not get data from store.') 
    } 
    } 

} 

Answer 2

당신은 mobx-decorators에서 @save 장식을 사용하려고 할 수 있습니다. 하지만 @save은 게으른 데코레이터이며 값은 첫 번째 속성 액세스 후에로드됩니다.