創建從API

Question

我卡試圖弄清楚如何寫一個通量商店，從我的使用altjs

import $ from 'jquery'; 

const utils = { 

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

這是快遞API在短短獲取數據工作的行動獲取數據的altjs通量店我相信我應該寫我的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? 
     }); 
     } 
     } 
    } 

的所有IM試圖做的，是從服務器獲取數據，告訴我的商店我們已經收到數據並用我們的api中的數據填充用戶配置數組，並且用於告訴我們的商店是通過屬於「操作」正確的調度員的信使？我已經看了很多教程，但對於我如何思考這個問題我仍然沒有很自信。如果我想通過POST請求更新數據會怎麼樣？

Answer 1

翻閱altjs文檔，似乎他們建議從操作中進行異步操作。我更喜歡這種方法，因爲它使商店保持同步並且易於理解。基於它們的例子

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動作恰好當提取器返回成功。該商店將更新自己的新數據和調度

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

隨着你的代碼，你可以做類似的事情。當原始請求數據時，獲取用戶配置文件將被觸發。在這裏，我將用戶配置文件設置爲[]，這是您原始的init值，但您可以將其設置爲任何值以指示數據正在加載。然後我添加了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); 
}