- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个使用 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);
}
最佳答案
我已经更新了您的文件以包含我在所有 React Native 应用程序中使用的基本模式。我正在使用 async/await 语法来处理异步调用,但您可以使用 promises 或您喜欢的任何模式。您可能还想让它成为一个 DRY 类来处理您所有的本地 API。请注意,如果您在商店中存储非 mobx 方法,这将不起作用,因为 mobx.toJS
不会删除它们并且 JSON.stringify
无法序列化函数。
编辑:修复了编译错误并添加了 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.')
}
}
}
关于javascript - 将 MobX 存储保存和加载到 React Native AsyncStorage 的最佳模式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47873943/
我正在开发一个使用 Expo 创建的 React Native 项目。我一直在使用普通的旧 AsyncStorage , 从 react-native 导入,一切都很好。 在查找如何模拟 AsyncS
我正在使用 AsyncStorage在 React Native 中,但我的问题总是出错 _reactNative.AsyncStorage.setItem is not a function 当我使
出了什么问题: Execution failed for task ':app:multiDexListDebug'. > A failure occurred while executing com
我有一个基于卡片的应用程序(左右滑动) 当我向左或向右滑动时,我会为其分配功能。 SwipeRight:(向右移动时执行的功能) storeInLevel1(props.id) removeFromL
我已经查看了有关 asyncStorage 的文档,但不明白为什么它没有保存我的数据。我将 Laravel 用于 API 和 Vue native(react-native 的包装器)。当用户注册时,
我有一个带有记住我的按钮的登录屏幕,当我连接时,我想将此信息存储在 asynsctorage 中,如下所示: if (this.isFormValid()) { AccountSe
如果这个问题是语法错误或类似的问题,请原谅我,我是 React-Native 的新手,还有很多东西需要学习。 我按照文档尝试了 AsyncStorage,但它返回了一个错误。 class iCare
如何在“componentDidMount”处获取 AsyncStorage 项目,这里是我的代码 componentDidMount() { AsyncStorage.getItem('custom
我正在使用 expo 和 react-native我正在尝试使用 AsyncStorage 在持久存储中保存 3 个值这样我就可以从应用程序的任何地方获取它,但是 asyncstorage 不保存或检
我有一个 react-native我计划重新编写所有代码库的项目,新的源代码。我打算使用相同的包ID。 所以我的客户,他们希望用户会收到有关新应用程序版本的通知。在他们更新后,登录状态将保持 ,因此用
我正在使用 redux-persist在一个 react native 项目中,它在大量设备上运行得很好除了 Android 7 .我正在尝试调试为什么我的本地存储也不持久的问题,并发现了这一点: 以
我想在我的 React Native 应用程序中保留用户的帐户凭据(即用户名和密码)。我应该使用 AsyncStorage ? 换句话说,我想知道是否以及如何AsyncStorage保护其内容。 do
我正在尝试从异步存储中获取项目。 componentDidMount() { console.log('componentDidMount') AsyncStorage.getItem
我的应用程序从网络服务器下载图像并保存它们,但我不确定将它们保存在哪里,是否有图像的本地存储? 谢谢 最佳答案 试试 rn-fetch-blob 你可以 创建文件 删除文件 创建目录 读取文件 下载文
我无法使用 AsyncStorage setItem。以下是我的代码。因此,我从 TextInput 获取状态名称,然后将其存储在 TouchableOpacity 的 AsyncStorage on
我是 React 原生环境的新手,我正在尝试构建一个应用程序,我在其中使用 AsyncStorage 来保存用户首选项。 我无法保存/获取任何东西并且低于警告,例如, [Unhandled promi
有什么方法可以同步我通过asyncStorage获取的数据吗? 我在 BaseAction.js 中获取数据 import { AsyncStorage } from 'react-native';
我有一个react-native应用程序,我在其中调用一个api,它应该返回JSON,但我只是未定义。 export function fetchFromAPI() { AsyncStorage.
我试图用这个存储日期:https://github.com/react-native-community/datetimepicker 问题是我希望将日期保存在 AsyncStorage 中,可能还存
如何在 Asyncstorge 中设置多个值?因为我正在尝试设置 token和 user_id .这些是服务器响应值。 这就是响应的样子 json { error: 0, data: 'User
我是一名优秀的程序员,十分优秀!