{"id":1867,"date":"2016-08-12T12:55:01","date_gmt":"2016-08-12T12:55:01","guid":{"rendered":"http:\/\/www.navision-blog.de\/blog\/?p=1867"},"modified":"2016-08-12T12:59:15","modified_gmt":"2016-08-12T12:59:15","slug":"fable-asyncstorage-data-access-with-fsharp-on-react-native","status":"publish","type":"post","link":"http:\/\/www.navision-blog.de\/blog\/2016\/08\/12\/fable-asyncstorage-data-access-with-fsharp-on-react-native\/","title":{"rendered":"Fable |> AsyncStorage &#8211; Data access with F# on React Native"},"content":{"rendered":"<p>I my last two articles I introduced <a href=\"http:\/\/www.navision-blog.de\/blog\/2016\/08\/06\/fable-react-native\/\">React Native app development with F#<\/a> and\u00a0showed how we can <a href=\"http:\/\/www.navision-blog.de\/blog\/2016\/08\/10\/fable-fetch-http-calls-in-javascript-apps-with-fsharp\/\">do\u00a0HTTP calls with the Fetch API<\/a>. I also mentioned briefly how to access the local storage of your phone\u00a0in order to cache information. In this article I want to look a small bit deeper into this.<\/p>\n<p>React Native provides a basic abstraction called <a href=\"https:\/\/facebook.github.io\/react-native\/docs\/asyncstorage.html\">AsyncStorage<\/a> that works on Android and iOS. With the help of a package called <a href=\"https:\/\/www.npmjs.com\/package\/fable-react-native-simple-store\">fable-react-native-simple-store<\/a> we can use it from F#:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/forki\/33590c9d058b532542ad536aed53c23d.js\"><\/script><\/p>\n<p>As you can see all JavaScript promises calls are mapped into F# async computations and everything is statically typed. This makes it easy to integrate the local storage with other F# code.<\/p>\n<h5>DataStore internals<\/h5>\n<blockquote><p>\nAsyncStorage is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage. [<a href=\"https:\/\/facebook.github.io\/react-native\/docs\/asyncstorage.html\">project site<\/a>]\n<\/p><\/blockquote>\n<p>AsyncStorage only provides a very basic key-value store. With the help of\u00a0<a href=\"https:\/\/www.npmjs.com\/package\/fable-react-native-simple-store\">fable-react-native-simple-store<\/a>\u00a0we get something that allows us to store objects in arrays separated by type:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/forki\/4656df778924f94a2bbe9675a3e87875.js\"><\/script><\/p>\n<p>This is still a very low level data storage API, but as the <a href=\"https:\/\/github.com\/fsprojects\/fable-react_native-demo\">sample app<\/a> shows it&#8217;s already useful for caching specific app data.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I my last two articles I introduced React Native app development with F# and\u00a0showed how we can do\u00a0HTTP calls with the Fetch API. I also mentioned briefly how to access the local storage of your phone\u00a0in order to cache information. In this article I want to look a small bit deeper into this. React Native [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/posts\/1867"}],"collection":[{"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/comments?post=1867"}],"version-history":[{"count":7,"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/posts\/1867\/revisions"}],"predecessor-version":[{"id":1874,"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/posts\/1867\/revisions\/1874"}],"wp:attachment":[{"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/media?parent=1867"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/categories?post=1867"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.navision-blog.de\/blog\/wp-json\/wp\/v2\/tags?post=1867"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}