Async Storage returning function instead of values

Question

I'm trying to use AsyncStorage in my react native app and dont know why is not working.

Basically I want to have an indexed array (or a any key-value pair) stored in asyncstorage with true or false for every element that have been added.

import {AsyncStorage} from 'react-native';

....

componentDidMount() {
    this.storeData('favourites', []);
}

addOrRemove(id) {
    let favourites = this.getData('favourites');
    console.log('favourites getted: ', favourites);
    favourites[id] = favourites[id] ? false : true; //this logic is working fine
    this.storeData('favourites', favourites);
}

getData and storeData:

 storeData = (key, value)  => async () => {
        try {
            await AsyncStorage.setItem(key, value);
        } catch (e) {
          // saving error
        }
    };

    getData = key => async () => {
        try {
          const value = await AsyncStorage.getItem(key)
          return value;
        } catch(e) {
          // error reading value
        }
    };

This is what I get when I do console.log('favourites getted: ', favourites);

favourites getted:  function _callee2() {
      var value;
      return _regenerator.default.async(function _callee2$(_context2) {
        while (1) {
          switch (_context2.prev = _context2.next) {
            case 0:
              _context2.prev = 0;
              _context2.next = 3;
              return _regenerator.default.awrap(_reactNative.AsyncStorage.getItem(key));

            case 3:
              value = _context2.sent;
              return _context2.abrupt("return", value);

            case 7:
              _context2.prev = 7;
              _context2.t0 = _context2["catch"](0);

            case 9:
            case "end":
              return _context2.stop();
          }
        }
      }, null, null, [[0, 7]]);
    }

When someone clicks on a specific button the method addOrRemove(id) is triggered. I want to get the array that I have stored in my AsyncStorage and put true or false in the id position of that array.

Why I'm receiving that function from the AsyncStorage and not the indexed array that I want?

I think that can be an async/await problem, but don't know where is the issue.

Answer 1

Your function "storeData" and "getData" return a async function, you can simplify :

 storeData = async (key, value) => {
   try {
     await AsyncStorage.setItem(key, value);
   } catch (e) {
     // process error
   }
 };

 getData = async (key) => {
   try {
     const value = await AsyncStorage.getItem(key)
     return value;
   } catch (e) {
     // process error
   }
 };

And use them with async/await :

componentDidMount() {
  this.storeData('favourites', []);
}

async addOrRemove(id) {
  try {
    let favourites = await this.getData('favourites');
    console.log('favourites getted: ', favourites);
    favourites[id] = favourites[id] ? false : true;
    await this.storeData('favourites', favourites);
  } catch (err) {
    //process error
  }
}