2017-12-18 26 views
0

私はMobXを使ってReact Nativeアプリを持っています。私のストアにはデフォルトのオブジェクトがあり、ユーザーがOption.jsファイル内のアクションで値を更新すると、これをローカルに保存してReact NativeのAsyncStorageを保存したいので、次にアプリケーションを開くときにオブジェクトを開きますデフォルトにリセットされません。最初の実行時にこれを処理し、新しい値をチェックして読み込むための良いパターンは何ですか?MobXストアを保存してネイティブ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); 
    } 

答えて

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.') 
    } 
    } 

} 
+0

Cool。私はこれを追加しました(反応ネイティブとロダッシュからtoJSが必要です、正しい?)。しかし、私はコンソールからデータを取得できませんでした.log ...? – Robbie

+0

ああ、残念です。はい、ロダッシュです。 getStore()メソッドのcatch文に実際のエラーを記録できますか? 'console.log(e);'で十分です。 – jkhedani

+0

TypeError:(0、_reactNative.toJS)は関数ではありません – Robbie

0

あなたはmobx-decoratorsから@saveデコレータを使用しようとすることができます。しかし、@saveが遅延デコレータであり、最初のプロパティアクセス後に値が読み込まれることに注意してください。

関連する問題