I have a list of items. users can like them.
I use AsynStorage to store the state. It works.
Only, I can't bind the storage to a specific item. If I like/dislike an item, the same thing happen for all of them. Here is the code, an idea ?
componentWillMount() {
this._renderSwitchButtonWithAsyncStorage().done;
}
_renderSwitchButtonWithAsyncStorage = async() => {
let token = await AsyncStorage.getItem('AlreadyLiked');
if (token){
this.setState({trueSwitchIsOn: true});
}else{
this.setState({trueSwitchIsOn: false});
}
};
onPressIcon(word){
AsyncStorage.setItem('AlreadyLiked', JSON.stringify({trueSwitchIsOn}));
}
I got it, thank you:
onPressIcon(word){
const { _key} = this.props.navigation.state.params;
AsyncStorage.setItem(JSON.stringify({_key}),JSON.stringify({trueSwitchIsOn}));
//Check if token exists
_renderSwitchButtonWithAsyncStorage = async() => {
const {_key} = this.props.navigation.state.params;
let token = await AsyncStorage.getItem(JSON.stringify({_key}));
Use Different AsyncStorage key name,
If you use same name to affect the all users so each users has use different key
Related
I'm doing a test app to learn react native, and I'm trying to use secure store (a bit like async storage) to store my individual goals and save them. So far it's working, however when I refresh the app only the last goal I entered gets loaded.
Where am I going wrong here? In my console log the full array is shown with both the old and the new ones I add, then I refresh and I only have one left.
const [goals, setGoals] = useState([])
const addGoal = async (goal) => {
try{
const goalJson = JSON.stringify({text: goal, id:`${Math.random()}`, todos:[], date: Date.now(), percentage:0})
await SecureStore.setItemAsync("Goal", goalJson)
load()
}
catch (err) {alert(err)}
}
const load = async() => {
try {
const goalValue = await SecureStore.getItemAsync("Goal")
const parsed = JSON.parse(goalValue)
if(goals !== null) {
setGoals([...goals, parsed])
console.log(goals)
}
}catch (err) {alert(err)}
}
useEffect(()=> {
load()
},[])
SecureStore is like a key-value database, so currently you're always writing to the same key Goal and your addGoal function is erasing the previous value with goalJson content.
Instead, load once the goals from storage, then update the goals state when a new goal is added, and write them all to on storage each time goals value is updated.
This how effects works, by "reacting" to a change of value. This is just a little bit more complicated because of SecureStorage async functions.
Here is my (untested) improved code. I renamed the storage key from Goal to Goals.
const [goals, setGoals] = useState([])
const [loaded, setLoaded] = useState(false)
useEffect(()=> {
async function load() {
try {
const goalsValue = await SecureStore.getItemAsync("Goals")
const goalsParsed = JSON.parse(goalsValue)
if (goalsParsed !== null) {
setGoals(goalsParsed)
}
setLoaded(true)
} catch (err) { alert(err) }
}
load()
}, []) // load only when component mount
const addGoal = (text) => {
const goal = { text, id:`${Math.random()}`, todos:[],
date: Date.now(), percentage:0 }
setGoals([...goals, goal])
})
useEffect(() => {
async function saveGoals() {
try {
// save all goals to storage
const goalsJson = JSON.stringify(goals)
await SecureStore.setItemAsync("Goals", goalsJson)
}
catch (err) {alert(err)}
}
if (loaded) { // don't save before saved goals were loaded
saveGoals();
}
}, [goals, loaded]) // run the effect each time goals is changed
What I am trying to do is sync a list of attendees from an online database, and if the current user is in the list, then disable a button, else enable the button.
I am using react native hook (I am not sure if I am using the term correctly as I am fairly new to react), in order to set the value of disabling the button.
The issue that I am facing is that the value is getting initialized to false, even tho it should clearly get initialized to true.
After adding some logging I made sure that the function is executing correctly and reaching the code where it sets the value to true.
const [buttonDisabled, changeButtonState] = useState( () => {
var database = firebase.database();
var userId = firebase.auth().currentUser.uid;
const dbRef = firebase.database().ref();
var Attendees = [];
var disable = false;
dbRef.child("gameAttendees").child(gameinfo.gameID).get().then((snapshot) => {
if (snapshot.exists()) {
Attendees = snapshot.val().Attendees;
for(var i=0;i<Attendees.length;i++){
if(Attendees[i]==userId){
return true;
}
}
} else {
console.log("no value");
return false;
}
}).catch((error) => {
console.error(error);
});
});
Adding an example of an async mount effect:
const Comp = () => {
const [s, setS] = useState(); // State will be undefined for first n renders
useEffect(() => {
// Call the async function and set the component state some time in the future
someAsyncFunction().then(result => setS(result));
}, []); // An effect with no dependencies will run only once on mount
return </>;
};
I want to write a function that will get the value for the collection, as shown in the picture:
And here is my code, I really don't know what to do after the "then()":
const getLocation = () => {
firebase
.firestore()
.collection("users")
.doc(currentUser.uid)
.get()
.then((querySnapshot) => {});
};
Note that currentUser is redux, meaning that the query will execute only for the current user that is logged in
If you want to return the value of businessLocation only you can do this:
const getLocation = () => {
return firebase.firestore()
.collection("users")
.doc(currentUser.uid)
.get()
.then(function(doc) {
if (doc.exists) {
data = doc.data();
return data.businessDetails.businessLocation;
} else {
return "";
}
});
};
You can get more information on how to get data in firestore at the Official Documentation.
Note: This makes your function become an asynchronous function. Therefore you should call it as follows:
getLocation().then(result => {
//Do whatever you want with the result value
console.log(result);
})
verifyUser which awaits verifyUserSignInSuccess which awaits userSnapshot which awaits user
Here in these two functions, which will be more effective in terms of correctness, memory, time for ReactNative app :
export function verifyUser() {
return async dispatch => {
dispatch(verifyUserSignInRequest());
try {
const user = await firebase.auth().onAuthStateChanged();
if (user) {
let userRef = "/user/" + user.uid;
const userSnapshot = await firebase
.database()
.ref(userRef)
.once("value");
dispatch(verifyUserSignInSuccess(userSnapshot.val()));
} else {
dispatch(verifyUserSignInFailure(USER_NOT_SIGNED_IN));
}
} catch (e) {
dispatch(verifyUserSignInFailure(e.message));
}
};
}
Or the Nested Async Await :
export function verifyUser() {
return async dispatch => {
dispatch(verifyUserSignInRequest());
try {
await firebase.auth().onAuthStateChanged(async user => {
if (user) {
let userRef = "/user/" + user.uid;
await firebase
.database()
.ref(userRef)
.once("value")
.then( () => {
dispatch(verifyUserSignInSuccess(userSnapshot.val()));
});
} else {
dispatch(verifyUserSignInFailure(USER_NOT_SIGNED_IN));
}
});
} catch (e) {
dispatch(verifyUserSignInFailure(e.message));
}
};
}
According to the documentation, the onAuthStateChanged() function returns
The unsubscribe function for the observer.
So you can just:
var unsubscribe = firebase.auth().onAuthStateChanged((user) {
// handle it for changes signed in, signed out, or when the user's ID token changed in situations such as token expiry or password change
});
And then:
unsubscribe(); for registering the for observer.
onAuthStateChanged is a Observer which calls the observer when users were signed in, signed out, or when the user's ID token changed in situations such as token expiry or password change . so the second one is the best solution . every login or change .
` let userRef = "/user/" + user.uid;
await firebase
.database()
.ref(userRef)
.once("value")
.then( () => {
dispatch(verifyUserSignInSuccess(userSnapshot.val()));
});
} else {
dispatch(verifyUserSignInFailure(USER_NOT_SIGNED_IN));
}`
that is correct to cross check is user is valid or not .i dont't thinks there is memory comparison is required.
Time - Since all your async functions need to run one after the other whichever method u use async/await or promise chaining or a mix up of both will take same time only.
Correctness - Both are correct logically and will work the same. But async/await is the latest addition to JS to solve the problem of promise chaining. Promise chaining leaves the code hard to read. Better U stick to async/await.For situations where u need to run two async functions parallelly, use await Promise.all() etc. In the end, it's your personal preference.
Memory? - I have no idea on that
Read this book its free on github which contains details on promises, async functions, async/await etc.
https://github.com/getify/You-Dont-Know-JS
I save some items to AsyncStorage in React Native and I am using chrome debugger and iOS simulator.
Without react native, using regular web development localStorage, I was able to see the stored localStorage items under Chrome Debugger > Resources > Local Storage
Any idea how can I view the React Native AsyncStorage stored items?
React Native Debugger has this built in.
Just call showAsyncStorageContentInDev() in the RND console and you'll be able to see a dump of your app's storage.
You can use reactotron i think it has Async Storage explorer ;)
https://github.com/infinitered/reactotron
Following should work,
AsyncStorage.getAllKeys((err, keys) => {
AsyncStorage.multiGet(keys, (error, stores) => {
stores.map((result, i, store) => {
console.log({ [store[i][0]]: store[i][1] });
return true;
});
});
});
I have created a helper method to log all Storage in a single object (more clean to log for example in Reactotron):
import AsyncStorage from '#react-native-community/async-storage';
export function logCurrentStorage() {
AsyncStorage.getAllKeys().then((keyArray) => {
AsyncStorage.multiGet(keyArray).then((keyValArray) => {
let myStorage: any = {};
for (let keyVal of keyValArray) {
myStorage[keyVal[0]] = keyVal[1]
}
console.log('CURRENT STORAGE: ', myStorage);
})
});
}
react native debugger
right click on free space
With bluebird you can do this:
const dumpRaw = () => {
return AsyncStorage.getAllKeys().then(keys => {
return Promise.reduce(keys, (result, key) => {
return AsyncStorage.getItem(key).then(value => {
result[key] = value;
return result;
});
}, {});
});
};
dumpRaw().then(data => console.log(data));
Maybe late, but none of these solutions fit for me.
On android, with Android Studio open file explorer then go to data/data/your_package_name
Inside you should have a folder called database and inside a file RKStorage.
This file is a SQLite3 file so get your favorite SQLite explorer and explore. If you want one this one does the job : DB Browser for SQLite
I did not find Reactotron to have any type of pretty printing enabled and it's also brutally latent so I just wrote a simple function using lodash. You could use underscore too.
Assuming you have a static mapping of all your keys...
const keys = {
key1: 'key1',
key2: 'key2'
}
export function printLocalStorage() {
_.forEach(keys, (k, v) => {
localStore.getAllDataForKey(v).then(tree => {
console.log(k) // Logs key above the object
console.log(tree) // Logs a pretty printed JSON object
})
})
}
It's not performant but it solves the problem.
You can Define function to get all keys by using async and await
getAllkeys = () => {
return new Promise( async (resolve, reject) => {
try {
let keys = await AsyncStorage.getAllKeys();
let items = await AsyncStorage.multiGet(keys)
resolve(items)
} catch (error) {
reject(new Error('Error getting items from AsyncStorage: ' + error.message))
}
});
}
somefunc = async () => {
try {
var items = await getAllkeys();
var someItems = items.filter(function (result, i, item) {
// do filtering stuff
return item;
});
// do something with filtered items
} catch (error) {
// do something with your error
}
}
I have a expo snack that shows this and also performs a "load". So it is useful for doing a dump of the contents and storing it to a file and loading it up later.
Here are they parts.
const keys = await AsyncStorage.getAllKeys();
const stores = await AsyncStorage.multiGet(keys);
const data = stores.reduce(
(acc, row) => ({ ...acc, [row[0]]: row[1] }),
{}
);
// data now contains a JSONable Javascript object that contains all the data
This ammends the data in the AsyncStorage from a JSON string.
// sample is a JSON string
const data = JSON.parse(sample);
const keyValuePairs = Object.entries(data)
.map(([key, value]) => [key, value])
.reduce((acc, row) => [...acc, row], []);
await AsyncStorage.multiSet(keyValuePairs);
import AsyncStorage from "#react-native-async-storage/async-storage";
export const printAsyncStorage = () => {
AsyncStorage.getAllKeys((err, keys) => {
AsyncStorage.multiGet(keys, (error, stores) => {
let asyncStorage = {}
stores.map((result, i, store) => {
asyncStorage[store[i][0]] = store[i][1]
});
console.table(asyncStorage)
});
});
};
enter image description here