javascript - Creating a altjs flux store for fetching data from API -

i'm stuck trying figure out how write flux store , action works in fetching data express api using altjs

import $ 'jquery';  const utils = {  myprofile: () => {     return $.ajax({       url: '/myprofile',       type: 'get'     });   } }; 

this how believe should write request grabbing user's profile (which should return json user info).

then store :

import useractions 'actions/useractions'; import alt '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 action i'm clueless

import alt 'altinstance'; import userwebapiutils 'utils/userwebapiutils'; fetchprofile(){     this.dispatch();     userwebapiutils.getprofile()       //what let our store know have data?       });          }       }   } 

all im trying do, grab data server, tell store we've recieved data , fill userprofile array data our api, , messenger telling our store through dispatcher belongs 'actions' correct? i've looked @ lot of tutorials still dont feel confident on how thinking this. if wanted update data through post request like?

looking through altjs doc seems recommend doing async operations actions. prefer approach because keeps stores synchronous , easy understand. based on example

locationaction

locationsfetcher.fetch()   .then((locations) => {     // can access other actions within our action through `this.actions`     this.actions.updatelocations(locations);   })   .catch((errormessage) => {     this.actions.locationsfailed(errormessage);   }); 

basically fetching information , triggering 2 actions depending on result of request store listening on to.

locationstore

this.bindlisteners({   handleupdatelocations: locationactions.update_locations,   handlefetchlocations: locationactions.fetch_locations,   handlelocationsfailed: locationactions.locations_failed }); 

when store receives handleupdatelocations action happens when fetcher returns successfully. store update new data , dispatch

handleupdatelocations(locations) {     this.locations = locations;     this.errormessage = null; } 

with code can similar. fetch user profile triggered when data requested. here setting user profile [] original init value can set indicate data being loaded. added 2 more methods, handlefetchuserprofilecomplete , handlefetchuserprofileerror called depending on if fetch successful or not. code below rough idea of 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 thing left trigger these 2 actions depending on result of fetch request in action code

fetchuserprofile(){     this.dispatch();     userwebapiutils.getprofile().then((data) => {         //what let our store know have data?         this.actions.fetchuserprofilecomplete(data)     })     .catch((errormessage) => {         this.actions.locationsfailed(errormessage);     }); }  fetchuserprofilecomplete(profile) {     this.dispatch(profile); }  fetchuserprofileerror(error) {     this.dispatch(error); }