jasonmerino / react-native-simple-store

A minimalistic wrapper around React Native's AsyncStorage.

Home Page:https://www.npmjs.com/package/react-native-simple-store

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to return stored value in a function.

jaredtibs opened this issue · comments

Hi,

I'm having trouble figuring out how to retrieve a value from a custom function that accesses the store. I keep getting an undefined value despite having access to the value from within the function.

My code:

export function fetchToken() {
  store.get('userToken')
  .then(token => {
    if (token) {
      return token;
    }
  })
}

If I console out the token in the above function it's clearly there.

But when I try to use the above function elsewhere like so:

let token = fetchToken() I get an undefined.

Clearly, I'm missing something here. Any help at all would be greatly appreciated .

Thank you!

@jaredtibs looks like the problem you are having is because you need to return the promise itself from your fetchToken function. The store returns a promise from all of its functions, so in order to get the returned token from your then clause as the result of your fetchToken function you would need to return the initial promise that the store.get call returns.

That would look something like this.

export function fetchToken() {
  return store.get('userToken')
  .then(token => {
    if (token) {
      return token;
    }
  })
}

Then you would call it like this.

let token;
fetchToken().then((t) => token = t);

Let me know if you have any more questions about this.

@jasonmerino,

Really appreciate the swift reply here. Thanks for the help.

@jasonmerino got another question on this if you have a moment.

I'm trying to set the token in a variable to be used in a request. The issue I'm still running into is that by the time I make the request it hasn't been set yet. I can see that by putting a console log immediately after the call to fetchToken(). It's still undefined. Is there a way for me to wait until that is set before proceeding with the request?

I'm aware of the await syntax, can that be used easily with simple store?

I've tried a bunch of different combinations here but I can't seem to get past the undefined:

current code state:

function {
let token;
fetchToken().then((t) => token = t);
console.log(token); //still undefined
//continues on to make fetch request
}

async function fetchToken() {
  let token
  try {
    token = await store.get('userToken');
    return token
  } catch(e) {
    console.error(e)
  }
}

@jaredtibs my apologies for the late reply here.

In your example code you posted, if you are going to get the value of the token you need to move your console.log(token) inside the callback function you pass the .then().

function whateverFunctionThisIs {
  let token;
  fetchToken().then((t) => {
    token = t;
    console.log(token); // will be value stored for token
  });
  console.log(token); // undefined because the callback function passed to .then() hasn't been run yet
  //continues on to make fetch request
}

async function fetchToken() {
  let token
  try {
    token = await store.get('userToken');
    return token
  } catch(e) {
    console.error(e)
  }
}

Or! If you wanted to get really fancy with async/await you could do this.

async function whateverFunctionThisIs {
  let token = await fetchToken();
  console.log(token); // will be value stored for token
  //continues on to make fetch request
}

async function fetchToken() {
  let token
  try {
    token = await store.get('userToken');
    return token
  } catch(e) {
    console.error(e)
  }
}

@jasonmerino very cool. Thanks again for the help.

No problem!