ReactJs server data handling

Question

I have small reactJS application in Flux architecture. I need to fetch server side data in each button click. I write some code in STORE like these

 var pieDataForMembers=[];
    var ReportStore =    assign({}, EventEmitter.prototype, {
        reportMemberList : function(reportMemberDetails){
         ob.projectMember(reportMember,function(getMembersEffort){ //ajax call
                pieDataForMembers = getMembersEffort;
            });
      return pieDataForMembers;
     }}

But when i run this code it is not waiting for server data and return always NULL value.

score 2 · Answer 1 · answered May 08 '15 at 11:01

Your return statement will always return before the ob.projectMember runs the callback. This is how javascript works. It will execute to the end of the block (returning a value which is null at this time) and then make the call to ob.projectMember and then some time later run the response callback.

You should take the return statement out, it is not serving any purpose. Any action you need to do with the server result should be done in the anonymous function you pass in do ob.projectMember as the callback.

If you are following the flux method then you should make your api call from your Action and then with the response from the server in your action you should send the result to dispatcher which will then send it to the Store.

If you want to keep going with the way you have done it above (ie making the server/api call from the Store) then you need to get the store to tell the Component. This is usually done by emitting an event but you havent put any such code in your question. So what you are doing is I believe not really the correct way.

ReactJs server data handling

1 Answers1