How do I read from local storage in Ionic React?

Question

I'm new to React and Ionic as well as JS in general so I've followed the tutorial and tried to adapt it to my use case.

What I want to achieve is the following:

• read a JSON string from local storage when the app loads
• write the (newer) JSON back to storage when the app quits

What I have right now is (heavily truncated):

ExploreContainer.tsx

import { useStore } from '../hooks/useFilesystem';

var vars = { intervaltime : 50000 /* ... */ };

const ExploreContainer: React.FC<ContainerProps> = ({ name }) => {
  const { writeVars, readVars } = useStore();
  writeVars();
  if ( vars.intervaltime == 50000 ) {
    vars = JSON.parse( readVars() );  
  }
  console.log( vars );
  // ...

useFilesystem.ts

import { useStorage } from '@ionic/react-hooks/storage';
import { vars } from '../components/ExploreContainer';

const FILESTORAGE = "files";

export function useStore() {    
  const { get, set } = useStorage();

  const writeVars = async () => {
    set(FILESTORAGE, JSON.stringify(vars));
  };
  const readVars = function() {
    get(FILESTORAGE).then((value) => { return value });
  }
  return {
    writeVars,
    readVars
  };
};

The problem right now: The readVars() call in the React.FC doesn't wait for the get in the custom hook. When I log the output on read, I see that it's an unfulfilled promise. Naturally, this prompts the JSON.parse() to throw an error, because the string it could parse isn't read yet.

I tried to declare an async function in the React.FC so I could await it, but function declarations are not possible because the FC is in strict mode always. I also tried to declare the async function before the React.FC but this doesn't work as well, because I mustn't call the hook outside the FC if I interpreted the error messages correctly. In the custom hook I previously had an await statement instead of the .then, but the behavior was the same.

If there is an easier way to read and write a JSON string into some form of persistent(!) storage, I'd be happy to learn about it!

Answer 1

The problem was not being able to await in the React.FC-block. However, the following worked like a charm:

var readPromise = readVars();
readPromise.then(function(result) {
  vars = JSON.parse(result);
  //doing stuff to the data
});

This ensured that the JSON.parse(result) only executes when the readVars-promise has been successfully resolved.

Answer 2

I see this as classic async/await issue only.

1. As you declared function 'writeVars' as async, so I expect function 'set()' is async in nature. If so please add await in front of 'set' function.
2. If 'get' function also an async one, then add await in front of it and add 'async' to 'readVars' function declaration.
3. If point 1 and point 2 are correct, then add await in front of functions 'writeVars' and 'readVars' where ever you call them and add async to the function declaration of calling function.