Question

我一直试图弄清楚如何编写助焊器存储和操作，只需使用altjs

从我的快速API获取数据

import $ from 'jquery';

const utils = {

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

这就是我认为我应该编写我的GET请求，只是抓取用户的个人资料（应该返回带有用户信息的json）。

然后是我的商店：

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');

然而，行动是我最无能的行为

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?
      });
         }
      }
  }

所有我试图做的，是从服务器获取数据，告诉我的商店我们已经收到数据并用来自我们api的数据填充userprofile数组，并告诉我们商店的信使是通过调度员属于＆＃39; actions＆＃39;正确？我看过很多教程，但我仍然对自己的思考方式没有信心。如果我想通过POST请求更新数据会是什么样的呢？

Answer 1

通过altjs doc查看，他们似乎建议从操作中执行异步操作。我也喜欢这种方法，因为它使商店保持同步和易于理解。基于他们的例子

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);
  });

基本上，他们正在获取信息，然后根据商店正在监听的请求结果触发2个操作。

LocationStore

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

当商店收到handleUpdateLocations操作时，该操作在fetcher成功返回时发生。商店将使用新数据和调度自动更新

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

使用您的代码，您可以执行类似的操作。最初请求数据时将触发获取用户配置文件。在这里，我将用户配置文件设置为[]，这是您的原始初始值，但您可以将其设置为任何指示正在加载数据的任何内容。然后我添加了另外两个方法，handleFetchUserProfileComplete和handleFetchUserProfileError，根据你的fetch是否成功调用它们。下面的代码是您应该拥有的粗略概念。

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');

唯一剩下的就是触发这2个动作，具体取决于动作代码中抓取请求的结果

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);
}

创建altjs flux store以从API

1 个答案: