Implementing promises and AsyncStorage in react-native

Question

What I have

2 functions-

1. getListInfo - here I am checking if an object exists, if not, create it, then, return it.

2. getInitialState - default function of react native.

What I want to achieve

Try to call getListInfo from getInitialState, and eventually fill the listview.

But, what is happening-

The code of whole page is getting executed even before the value obj is being returned. So, the problem is, the List View is getting the data as undefined.

What I know

To use promise to solve the problem. But, not the right way.

Actual Code -

getListInfo : function() {
    AsyncStorage.getItem('listobject').then((obj) => {
    if(obj == undefined)
    {
        var obj1 ={};
        obj1.data ={};
        obj1.data.isdirty = true;
        console.log("obj1 = "+ JSON.stringify(obj1));
        AsyncStorage.setItem('listobject',obj1);
        obj = AsyncStorage.getItem('listobject');
        console.log("obj = "+ JSON.stringify(obj));
    }
    if(obj.data.isdirty)
    {
        obj.data.isdirty = false;
        AsyncStorage.setItem('listobject',JSON.stringify(obj));
        return AsyncStorage.getItem('listobject');
    }
}).done();
},


  getInitialState: function() {
    applistglobal = this.checkLocalStore();

    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    return {
      dataSource: ds.cloneWithRows(this._genRows({})),
    };
  },


render: function() {
    /* BLAH BLAH BLAH */
}

Promise part of the code(getInitialState function)- I have used promises, but, even the function call is failing. So, please ignore this part of the code and evaluate the above code.

getInitialState: function() {
    var promise = new Promise(function (resolve, reject) {
      resolve(this.getListInfo());
    });

    promise.then((listobject) => {
      console.log("getInitialState listobject "+listobject);
    })

    promise.catch((error) => {
      console.log("ERROR"+error);
    })

    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    return {
      dataSource: ds.cloneWithRows(this._genRows({})),
    };
  },

Solution

The way you have set it up is not the usual practice.i.e Making requests in getInitialState. Return empty states and setState when promise completes. You can kick off the request in componentWillMount or componentDidMount. See this example https://facebook.github.io/react-native/docs/asyncstorage.html on react-native site. They are using ES7 async constructs though.

Comments

[bozzmob]

Yes. Now I see they are using ES7 async constructs. I was checking out on an older clone of the repo. Thanks.