Clojurians Log v2

Anyone know a good way of integrating re-frame and the react native async storage? What are the dos and don'ts of using async storage and potential pitfalls? I am trying to get into and use it, but I don't know exactly where to start.

Is for example setting the whole re-frame app-db into async storage for every event not smart? Should only certain data be put in async storage?

This library can be useful to you: https://github.com/cljsrn/side-fx/blob/master/src/side_fx/storage.cljs

Guys how do I get AsyncStorage when it is imported without {} brackets?

import AsyncStorage from '@react-native-community/async-storage';

For react native it is like this:

["react-native" :refer [ActivityIndicator]]

But that is also written like this:

import { ActivityIndicator } from 'react-native';

@shakof91 I worried about storing my whole app-db on every event but for my use case it’s imperceptible. I’d start by just doing that, the simplest thing that works, and then if you end up noticing issues later, find a solution.

I was thinking of just storing the whole app-db everytime the app-state changes to "background", but perhaps storing the whole app-db on every event is better since then we won't have any edgecases (like if app gets forced shutdown and not going into "background" first).

But do you know how to get the AsyncStorage from the community version of the async-storage? Currently this works for me

["react-native" :refer [AsyncStorage]]

Yeah, I did that originally, but I found that it wasn’t entirely reliable and I had to be more careful about syncing things. It turns out that just adding a side-effect that stores the app-db on every event is dumb and just works.

I’m not using shadow-cljs in my project (or the newer CLJS NPM stuff). So it’s a little different. Honestly I get confused by the differences in ES6/etc export styles. I have a lot of this:

(.-ActivityIndicator (js/require "react-native"))

Ok. Thank you for the headsup. I will definitely see if I can do the save on every event. How did you solve that by the way?

You can mess around in the repl by doing (def rn (js/require "react-native")) and then (js-keys rn) or whatever to see what’s in there.

I have a blog post about saving on every event here: https://increasinglyfunctional.com/2018/10/31/app-group-data-sync-with-clojurescript-and-re-frame.html

ah really. Didn't know that! Will try that. Thanks!

What I’m doing is a little more complicated because I’m not using AsyncStorage, but if you scroll down, you can see how to plug into re-frame and just put your storage code there.

Ah so you are using the (after) function. So after the event has gone through all its coeffects, you put the current db in storage. neat!

Yup, it turns out to work just fine for storing a few kb at least.

When I do "yarn add @react-native-community/async-storage", does this mean I need to get async-storage from @react-native-community/async-storage or is the react-native async-storage automagically overwritten and points to the community version? 😛

I have kept to the core react-native stuff. This is my first package outside of react-native and react 😄

I bet I will have to figure this out soon either way.

I don’t think adding something with yarn automatically pulls it in. You do that when you either require in your ns form or if you js/require. Whatever you require and define is what you get.

Yes. I was just wondering if

["react-native" :refer [AsyncStorage]]

["@react-native-community/async-storage" :refer [AsyncStorage]]

So much I still don't quite understand. But this whole react native journey has been mostly pleasant actually. 😄

Ah, I see. I’m honestly not sure either, the RN packager does some magic and I’m sometimes surprised by what happens.

They are not the same thing @shakof91 because I think that AsyncStorage got pulled out of react-native.

The first line used to work, but the second require is what you need nowdays…

Unfortunatly

["@react-native-community/async-storage" :refer [AsyncStorage]]

I found the answer!

This is from the shadow-cljs documentation. So in my case I needed to use this

["@react-native-community/async-storage" :default AsyncStorage]

The async-storage doesn't seem to work. Whenever I quit the app and relaunch it, the async-storage is empty again. :x