创建用于从 API 获取数据的 altjs 通量存储

Question

我一直在尝试弄清楚如何使用 altjs

编写仅用于从我的 express API 中获取数据的通量存储和操作

import $ from 'jquery';

const utils = {

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

这就是我认为我应该编写我的 GET 请求以获取用户个人资料的方式（应该 return 一个带有用户信息的 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 数组，以及告诉我们商店的信使通过属于 'actions' 的调度员是否正确？我看过很多教程，但我仍然对自己的想法不太有信心。如果我想通过 POST 请求更新数据会怎样？

Answer 1

查看 altjs 文档，他们似乎建议从操作中执行异步操作。我也更喜欢这种方法，因为它使存储保持同步且易于理解。基于他们的例子

位置动作

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 个操作。

位置存储

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

当商店接收到 handleUpdateLocations 操作时，该操作在获取程序 returns 成功时发生。商店将使用新数据自行更新并发送

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

使用您的代码，您可以做类似的事情。最初请求数据时将触发获取用户配置文件。在这里，我将用户配置文件设置为 []，这是您的原始初始值，但您可以将其设置为任何值以指示正在加载数据。然后，我又添加了 2 个方法，handleFetchUserProfileComplete 和 handleFetchUserProfileError，它们的调用取决于您的提取是否成功。下面的代码是您应该拥有的粗略想法。

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

创建用于从 API 获取数据的 altjs 通量存储

Creating a altjs flux store for fetching data from API

javascript

flux

express

ecmascript-6

reactjs