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

Posted 2023-02-22

【中文标题】创建用于从 API 获取数据的 altjs 通量存储

【英文标题】：Creating a altjs flux store for fetching data from API

【发布时间】：2015-10-10 07:24:55

【问题描述】：

我一直在试图弄清楚如何编写一个通量存储和操作，该操作仅用于使用 altjs 从我的 express 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 数组，告诉我们商店的信使是通过属于的调度程序“行动”正确吗？我看过很多教程，但我仍然对自己的想法没有信心。如果我想通过 POST 请求更新数据会怎样？

【参考方案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 操作时，该操作在提取器成功返回时发生。商店将使用新数据更新自身并调度

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

剩下的唯一事情就是根据您在操作代码中获取请求的结果触发这两个操作

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

【讨论】：

非常感谢，这真的很清楚，所以我只想再回顾一次 1. 我们通过初始化一个空数组来设置我们的商店（就像我们在反应中所做的那样），然后我们有一些东西来处理获取用户配置文件的操作，但是由于它是异步的，我们需要在开始和结束时的数据结构，当然还有一个错误，以防万一发生故障。然后在我们的操作中，我们从那里分派和调用我们的 API。因为我的是一个 ajax 调用，所以它会是 .done 和 .fail 而不是 .then 和 .catch，但如果它是一个 es6 承诺，那就对了？

对，您的理解似乎是正确的。商店注册回调，当数据/错误返回或最初请求数据时被调用。该操作最初调用 API 并通知存储加载请求已进入，然后分派已注册回调的 AJAX 请求返回的数据或错误。是的，我认为如果您将 jQuery 用于 ajax，那么 .done 和 .fail 是正确的方法。

其实他们建议把这个放在商店里：alt.js.org/docs/async@noveyak