如何在FLUX中处理Ajax响应

Question

I'm new in FLUX and I have problem how to handle ajax in FLUX.

My situation is following :

I have file commentAPI.js

//all js files are compiled from coffescript

// fetching all comments from server
    _fetchComments: function() {
       var promise;
       promise = $.ajax({
         url: "comments/show",
         type: "GET",
         dataType: "json"
        });
        return promise.then(function(response) {
         // here should be any action ?
        }, function(error) {
         return console.log(error);
        });   }

Then I have commentActions.js

   fetchComments: function () {
    allcomments=commentAPI._fetchComments(); 
    return Dispatcher.dispatch({
      actionType: ActionTypes.ALL_COMMENTS,
      comments: allcomments
    });
  }

This code actually doesnt work because function _fetchComments called in commentActions.js return whole promise.

What I want to do: I would like to get response from ajax callback function and pass the result to my payload object and then dispatch it by Dispatcher in my _fetchComments() function in commentActions.js

How is the best way to do it? How can I get the access to the ajax callback function response ?

Answer 1

You should dispatch _fetchComments function and when that promise is resolved, invoke the action fetchComments .

In the react code you should invoke the async function (ie _fetchComments ).

In your example:

// fetching all comments from server
    _fetchComments: function() {
       var promise;
       promise = $.ajax({
         url: "comments/show",
         type: "GET",
         dataType: "json"
        });
        return promise.then(function(response) {
         // put the sync action here
         fetchComments(response)
        }, function(error) {
         return console.log(error);
        });   }

And don't forget to remove it from the action (ie fetchComments )