how to set ajax data fetching in flux?

Question

I'm working on my first FLUX app and stumbled upon this problem. I want to get data from the server and pass it down to my component.

Say i have a component method ...

loadMore() {
  AppActions.getCards();
}

... and a store:

$.ajax({
  url: '../data.json',
  dataType: "json",
  success: function (data) {
    // ???
  }.bind(this),
  error: function (xhr, status, err) {
    console.error(status, err.toString());
  }.bind(this)
});

not quite sure how to do it properly. inside the ajax this is obviously undefined, also can't return value from it, or can i?

pretty sure it's trivial, but would be really grateful for an advice

possible duplicate of [Where should ajax request be made in Flux app?](http://stackoverflow.com/questions/26632415/where-should-ajax-request-be-made-in-flux-app) — Cory Danielson, May 24 '15 at 20:07
Thank you, Cory, but've i found this answer a little obsolete for my case. Maybe there's some kind of shortcut? — walkthroughthecode, May 24 '15 at 20:31

Alexey Chudinov · Accepted Answer · 2015-12-04T13:08:40.707

According to Facebook flux-chat example you can do the following:

Trigger view action from component

loadMore() {
    AppViewActionCreators.getCards();
}

In AppViewActionCreators invoke AppWebAPIUtils method

getCards() {
    AppWebAPIUtils.getCards();
}

Make ajax call in your AppWebAPIUtils

getCards() {
    $.ajax({
        url: '../data.json',
        dataType: "json",
        success: function (data) {
            AppServerActionCreators.recieveCards(data);
        },
        error: function (xhr, status, err) {
            console.error(status, err.toString());
        }
    });
}

On success trigger server action in ServerActionCreators, dispatching an event with data

recieveCards(data) {
    AppDispatcher.dispatch({
        type: ActionTypes.RECIEVE_CARDS,
        data: data
    });
}

Recieve data by store and emit change event

AppStore.dispatchToken = AppDispatcher.register(function (action) {
    switch (action.type) {
        case ActionTypes.RECIEVE_CARDS:
            _cards = action.data.cards;
            AppStore.emitChange();

            break;
    }
});

You should have view and server action creators to prevent circular dependency.

This flow is pretty clear. My question boils down to — how to pass _cards back to component? — walkthroughthecode, May 25 '15 at 20:23
Read carefully this [article](https://facebook.github.io/flux/docs/todo-list.html#content). Especially [Listening to Changes with a Controller-View](https://facebook.github.io/flux/docs/todo-list.html#listening-to-changes-with-a-controller-view). It shows how to make your component automatically fetch data. — Alexey Chudinov, May 25 '15 at 20:54

score 1 · Answer 2 · answered May 25 '15 at 00:36

Do it in the action handler. So the flow would be:

Component calls action
Action handler will retrieve the data
Once data arrives, action will dispatch an event notifying about the data
Stores that are listening for the event will receive the data
Stores will emit change event
Components that depend on that store will update

In the action handler you can dispatch event that you are starting to load data, so that you can update store state and UI.

Fluxible explains it very clearly: http://fluxible.io/api/actions.html

how to set ajax data fetching in flux?

2 Answers2