Question

我正在学习react / flux / alt。我有一个包含以下componentDidMount的页面：

componentDidMount() {
  LeaderBoardStore.listen(this.onChange);
  LeaderBoardActions.getCurrentWeek();
  LeaderBoardActions.getSeason();
  LeaderBoardActions.updateSortWeek(this.state.currentWeek);    
  LeaderBoardActions.getLeaders(this.query());
}

我遇到的问题是所有操作都是异步的。那就是他们调用一个api，直到回调被触发才响应。这是在行动中。

我的问题是如何使用Actions获取当前周并等待它在updateSortWeek（）之前处理

Answer 1

您应该在动作创建者中使用promises，并且只有在从API调用中获取数据后才会调度操作。

实施例

getCurrentWeek: function() {
  // Make the API Call and get back the response (data)
  ApiUtils.getWeek().then(function(data){
  // Dispatch an action
  AppDispatcher.dispatch({
    type: ActionTypes.GET_WEEK,
    data: data, 
  });
  }).catch(function(err){
    // Handle the error
  })
}

这就是API调用使用superagent-promise的方式：

getWeek: function() {
  return superagent
      .get( url )
      .set('Accept', 'application/json')
      .query({
        // Query
      })
      .end()
      .then(function(res) {
        var week = res.body;
        if ( !week ) {
          return Promise.reject( new Error("Error") );
        } else {
          return week;
        }
      });

}，

这样，只有在从API调用返回后才会调度操作。商店获得操作后，您可以调用updateSortWeek()功能。

如何使用react / flux设置回调

1 个答案: