Search code examples
javascriptreactjsflux

Service call in Fluxxor / React.JS


I'm very very new to react.js and Fluxxor and I haven't done web development for a while. :)

I was wondering where to put server calls (JQuery $.ajax()) in my code? My actions are only dispatching calls like:

var actions = {
    onBlubb: function (data) {
        this.dispatch(cmd.BLUBB, data);
},};

Then I have one store which does some changes and calls the emit function to update the view. The whole cycle works fine (view, action, dispatcher, store)

Now I guess I should put my ajax call in my store class. Let's say i call my store "blubbStore". But I want my store classes to be testable. That means I have to put the ajax call in another store class which basically does the server call and ...

  • Approach 1) ... triggers a success/failed action. This action is handled in blubbStore
  • Approach 2) ... stores the service call response in properties. Then blubbStore calls "WaitFor" and reads the data from this "service-caller-store" once the service call is done.

I guess approach 2 is not possible, because the WaitFor does not await asynchronous calls? That means approach 1 would be the solution?

(And the actions should dispatch only messages. right?)

Thanks


Solution

  • In my personal view and experience - it's better to put async call in actions with this logic - image In this way you can dispatch an event, calling loading screen for example and then, when data is recieved dispatch new change with data.

    In the end I believe it's a personal choice, aim for the method that will help you handle code better.