Creating a altjs flux store for fetching data from API

Question

I'm stuck trying to figure out how to write a flux store and action that works in just fetching data from my express API using altjs

import $ from 'jquery';

const utils = {

myProfile: () => {
    return $.ajax({
      url: '/myProfile',
      type: 'GET'
    });
  }
};

This is how I believe I should write my GET request for just grabbing a user's profile (which should return a json with user info).

then for my store :

import UserActions from 'actions/UserActions';
import alt from 'altInstance';
class UserStore {

constructor() {
   this.userProfile = [];
   this.on('init', this.bootstrap);
   this.on('bootstrap', this.bootstrap);
   this.bindListeners({
   fetchUserProfile: UserActions.FETCHUSERPROFILE,
     });
  }

fetchUserProfile(profile) {
    this.userProfile = profile;
  }
}
export default alt.createStore(UserStore, 'UserStore');

However the action is where i'm the most clueless

import alt from 'altInstance';
import UserWebAPIUtils from 'utils/UserWebAPIUtils';
fetchProfile(){
    this.dispatch();
    UserWebAPIUtils.getProfile()
      //what do we do with it to let our store know we have the data?
      });
         }
      }
  }

All im trying to do, is grab data from the server, tell my store we've recieved the data and fill the userprofile array with the data from our api, and the messenger for telling our store is through a dispatcher which belongs to 'actions' correct? I've looked at a lot of tutorials but I still dont feel very confident on how I am thinking about this. What if I wanted to update data through a POST request what would that be like?

Answer 1

Looking through altjs doc it seems like they recommend doing the async operations from actions. I prefer this approach as well because it keeps stores synchronous and easy to understand. Based on their example

LocationAction

LocationsFetcher.fetch()
  .then((locations) => {
    // we can access other actions within our action through `this.actions`
    this.actions.updateLocations(locations);
  })
  .catch((errorMessage) => {
    this.actions.locationsFailed(errorMessage);
  });

Basically they are fetching the information and then triggering 2 actions depending on the result of the request which the store is listening on to.

LocationStore

this.bindListeners({
  handleUpdateLocations: LocationActions.UPDATE_LOCATIONS,
  handleFetchLocations: LocationActions.FETCH_LOCATIONS,
  handleLocationsFailed: LocationActions.LOCATIONS_FAILED
});

When the store receives a handleUpdateLocations action which happens when the fetcher returns successfully. The store will update itself with new data and dispatch

handleUpdateLocations(locations) {
    this.locations = locations;
    this.errorMessage = null;
}

With your code you can do something similar. The fetch user profile will be triggered when data is originally requested. Here I am setting user profile to be [] which is your original init value but you can set it to anything to indicate data is being loaded. I then added 2 more methods, handleFetchUserProfileComplete and handleFetchUserProfileError which get called depending on if your fetch was successful or not. The code below is a rough idea of what you should have.

constructor() {
   this.userProfile = [];
   this.on('init', this.bootstrap);
   this.on('bootstrap', this.bootstrap);
   this.bindListeners({
       handleFetchUserProfile: UserActions.FETCH_USER_PROFILE,
       handleFetchUserProfileComplete: UserActions.FETCH_USER_PROFILE_COMPLETE,
       handleFetchUserProfileError: UserActions.FETCH_USER_PROFILE_ERROR,
   });
  }

fetchUserProfile() {
    this.userProfile = [];
}

handleFetchUserProfileComplete(profile) {
    this.userProfile = profile;
}

handleFetchUserProfileError(error) {
    this.error= error;
}

export default alt.createStore(UserStore, 'UserStore');

The only thing left is to trigger these 2 actions depending on the result of your fetch request in your action code

fetchUserProfile(){
    this.dispatch();
    UserWebAPIUtils.getProfile().then((data) => {
        //what do we do with it to let our store know we have the data?
        this.actions.fetchUserProfileComplete(data)
    })
    .catch((errorMessage) => {
        this.actions.locationsFailed(errorMessage);
    });
}

fetchUserProfileComplete(profile) {
    this.dispatch(profile);
}

fetchUserProfileError(error) {
    this.dispatch(error);
}