Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

React Flux Get Api data from remote service – Facebook api

I am trying to follow the flux architecture from the facebook sample found at
https://github.com/facebook/flux/tree/master/examples/flux-todomvc

Where is this architecture would you call your api to get data from a remote service?

The AppContainer has a getState method which gets the get initial state of the store. This would be null since the database call hasn’t happened yet. I could make the api call in the Action creator. But where do i trigger this action?

AppContainer.js

function getStores() {
    return [
        TodoStore
    ];
}

function getState() {
  return {
    todos: TodoStore.getState()
  };
}
Tags:

2

Answers


  1. 0

    You should create an action dispatcher, that fires the fetch request and dispatches the action with the fetch result as payload. Handle this action dispatcher over via mapDispatchToProps and call it inside your component via componentDidMount cycle method.

    Login or Signup to reply.
  2. 0

    you should create Actions class, that will have methods. This method will dispatch actions to store, and send ajax data.

    example of one Actions class method:

    changeCurrent(role: string): void {
    // Things to do right now
    dispatch(RolesActionID.ROLES_CHANGE_CURRENT, {
        role: role
    });

    let props: any = { Role: role };
    let data: any = formAjaxData("GetPrivileges", props, true);

    // Send ajax
    let post: any = $.post({ url: "/v1/json", data: data, contentType: "text/html; charset=utf-8" })
        .done(function (result: string): void {
            dispatch(RolesActionID.ROLES_CHANGE_CURRENT_SUCCESS, {
                rolePrivileges: result,
                role: role
            });
        })

        .fail(function (result: any): void {
            // Fail actions
        });
};

    so in fact you will have 2-3 dispatched events:

    1. when action started (we can disable SUBMIT button for expl)
    2. when we got success ajax response
    3. when we got failed ajax response (don’t forget to enable SUBMIT button again)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search