blocks|key|4179711|text|对于持久化MST存储，您可能会对使用mst-persist感兴趣，根据自述文件，它目前是MST的onSnapshot和applySnapshot的一个小包装器(免责声明:我是创建者)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4179712|要使用AsyncStorage支持的mst-persist在React+Native中持久化数据，您可以这样做：|4179713|import+{+types+}+from+'mobx-state-tree'
import+{+AsyncStorage+}+from+'react-native'
import+{+persist+}+from+'mst-persist'

const+SomeStore+=+types.model('Store',+{
++name:+'John+Doe',
++age:+32
})

const+someStore+=+SomeStore.create()

persist('some',+someStore,+{
++storage:+AsyncStorage,++//+default:+localStorage
++jsonify:+true++//+if+you+use+AsyncStorage,+this+should+be+true
++++++++++++++++++//+default:+true
++whitelist:+['name']++//+only+these+keys+will+be+persisted
}).then(()+=>+console.log('someStore+has+been+hydrated'))|code-block|syntax|javascript|4179714|我最初使用mst-persist的用例是React+Native，当前的自述文件实际上会在我作为示例制作的OSS漫画阅读器应用程序中指向a+commit。|4179715|如果您对如何在没有其他库(如mst-persist+)的情况下使用MST做到这一点感兴趣，那么目前的持久性源代码实际上是<+50+LoC。除去一些功能，它是一个轻快的<+20+LoC：|4179716|import+{+onSnapshot,+applySnapshot+}+from+'mobx-state-tree'

export+const+persist+=+(name,+store,+options+=+{})+=>+{
++let+{storage,+jsonify}+=+options

++onSnapshot(store,+(_snapshot)+=>+{
++++const+snapshot+=+{+..._snapshot+}
++++const+data+=+!jsonify+?+snapshot+:+JSON.stringify(snapshot)
++++storage.setItem(name,+data)
++})

++return+storage.getItem(name)
++++.then((data)+=>+{
++++++const+snapshot+=+!jsonify+?+data+:+JSON.parse(data)
++++++applySnapshot(store,+snapshot)
++++})
}|4179717|还有一些其他的例子也展示了类似的功能，比如mst-persist部分受其启发的this+gist，使用HoC和类似于redux-persist的PersistGate的this+repo，以及以多个商店为参数的this+gist。|4179718|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/agilgur5/mst-persist|1|https://github.com/agilgur5/react-native-manga-reader-app/pull/2/commits/286725f417d321f25d16ee3858b0e7e6b7886e77|2|https://gist.github.com/benjick/c48dd2db575e79c7b0b1043de4556ebc|3|https://github.com/tallpants/mobx-state-tree-persist-example|4|https://gist.github.com/terrysahaidak/43f316d278f8519538e69e7fd2c737a3^0|I|B|1C|A|1N|D|I|B|0|0|3|C|I|B|0|0|5|B|1W|8|1|0|E|B|0|0|L|B|1M|D|20|B|13|9|2|2C|9|3|2X|9|4|0^^$0|@$1|2|3|4|5|6|7|1A|8|@$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]]|D|@$9|1H|A|1I|1|1J]]|E|$]]|$1|F|3|G|5|6|7|1K|8|@$9|1L|A|1M|B|C]|$9|1N|A|1O|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|1P|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1Q|8|@$9|1R|A|1S|B|C]]|D|@$9|1T|A|1U|1|1V]]|E|$]]|$1|O|3|P|5|6|7|1W|8|@$9|1X|A|1Y|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|J|7|1Z|8|@]|D|@]|E|$K|L]]|$1|S|3|T|5|6|7|20|8|@$9|21|A|22|B|C]|$9|23|A|24|B|C]|$9|25|A|26|B|C]]|D|@$9|27|A|28|1|29]|$9|2A|A|2B|1|2C]|$9|2D|A|2E|1|2F]]|E|$]]|$1|U|3|-4|5|6|7|2G|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]|12|$5|X|Y|Z|E|$10|13]]|14|$5|X|Y|Z|E|$10|15]]|16|$5|X|Y|Z|E|$10|17]]|18|$5|X|Y|Z|E|$10|19]]]]

For persisting MST stores, you might be interested in using <a href="https://github.com/agilgur5/mst-persist" rel="noreferrer"><code>mst-persist</code></a>, which, per the README, is currently a small wrapper around MST's <code>onSnapshot</code> and <code>applySnapshot</code> (disclaimer: I'm the creator).

To persist data in React Native with <code>mst-persist</code> backed by <code>AsyncStorage</code>, one would do:

<pre><code>import { types } from 'mobx-state-tree'
import { AsyncStorage } from 'react-native'
import { persist } from 'mst-persist'

const SomeStore = types.model('Store', {
 name: 'John Doe',
 age: 32
})

const someStore = SomeStore.create()

persist('some', someStore, {
 storage: AsyncStorage, // default: localStorage
 jsonify: true // if you use AsyncStorage, this should be true
 // default: true
 whitelist: ['name'] // only these keys will be persisted
}).then(() =&gt; console.log('someStore has been hydrated'))
</code></pre>

My original use case for <code>mst-persist</code> was for React Native and the current README will actually point you to <a href="https://github.com/agilgur5/react-native-manga-reader-app/pull/2/commits/286725f417d321f25d16ee3858b0e7e6b7886e77" rel="noreferrer">a commit</a> in an OSS RN manga reader app I made as an example.

If you're interested in how to do it with MST without another library like <code>mst-persist</code>, the persistence source code is actually &lt; 50 LoC currently. And minus some features, it's a brisk &lt; 20 LoC: 

<pre><code>import { onSnapshot, applySnapshot } from 'mobx-state-tree'

export const persist = (name, store, options = {}) =&gt; {
 let {storage, jsonify} = options

 onSnapshot(store, (_snapshot) =&gt; {
 const snapshot = { ..._snapshot }
 const data = !jsonify ? snapshot : JSON.stringify(snapshot)
 storage.setItem(name, data)
 })

 return storage.getItem(name)
 .then((data) =&gt; {
 const snapshot = !jsonify ? data : JSON.parse(data)
 applySnapshot(store, snapshot)
 })
}
</code></pre>

There are a handful of other examples out in the wild that show similar functionality as well, such as <a href="https://gist.github.com/benjick/c48dd2db575e79c7b0b1043de4556ebc" rel="noreferrer">this gist</a> that <code>mst-persist</code> is partly inspired by, <a href="https://github.com/tallpants/mobx-state-tree-persist-example" rel="noreferrer">this repo</a> that uses HoCs and <code>PersistGate</code>s similar to <code>redux-persist</code>, and <a href="https://gist.github.com/terrysahaidak/43f316d278f8519538e69e7fd2c737a3" rel="noreferrer">this gist</a> that takes multiple stores as an argument.

I need to persist a MST Store in React Native. The data is changed seldomly.

I'm confused between using AsyncStorage and AutoRun.

How to Persist Mobx State Tree in React Native?

React Native

JSON

我需要在React Native中持久化一个MST Store。数据很少发生变化。我把使用AsyncStorage和AutoRun弄糊涂了。

问如何在React Native中持久化Mobx状态树？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在React Native中持久化Mobx状态树？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在React Native中持久化Mobx状态树？
EN