在 React.js 应用程序中，API 调用在商店中失败，我如何将其传回视图？

Question

https://cask.scotch.io/2014/10/V70cSEC.png

^ 根据这个流程，我必须在商店中进行更改，然后由视图拾取。

更具体地说，我正在尝试删除一个用户，但是当商店从数据库中收到错误时，我想显示一个模式来说明发生了错误。传输消息的正确方法是通过存储变量完成，然后在 getStateFromFlux 方法的视图中获取吗？

userStore = {
initialize: function(options) {
    // other variables
    this.userDeletionError = false;
},
deleteUser: function(payload) {
    Axios.delete(DBURL)
      .then((response) => {
        // succeeds
      })
      .catch((error) => {
        // other error handling
        this.userDeletionError = true;
      });
  }
}

Answer 1

如果我很清楚您在商店中使用 ajax 调用，那么这是一种反模式。正确的做法是在操作文件中调用，然后在商店中传输。

要回答您的问题，通量模式应该是这样的（不确定它是否与您的用例 100% 匹配）。

查看 => 用户想要删除一个 'user'，他点击了删除按钮
查看触发操作。
操作触发 ajax 调用 'delete this user'

Action 接收答案并将其传输到 store（这里您使用的是 react dispatcher，示例如下：

MyAjaxCall.then(function(answer) {  
    Dispatcher.handleViewAction({
        actionType: Constants.ActionTypes.DELETE_USER,
        result: answer
    });
});

5.Your 商店仍在通过调度程序捕获 ajax 答案（以下示例：

MyStore.dispatcherIndex = Dispatcher.register(function(payload) {
    var action = payload.action;
    var result;

    switch(action.actionType) {
         case Constants.ActionTypes.USER_DELETE:    
            registerAnswer(action.result);
            MyStore.emitChange();       
            break;
    }
    return true;
});

你可以看到你的商店会触发registerAnswer()，在这个函数中你可以检查ajax调用是否已经执行（我的意思是用户是否被删除）和相应地构建对象。这里有两种方法可以告诉您关于答案状态的视图 1. 例如，您构建一个带有字段消息的 dataAnswer 对象，然后您的视图可以检查它 2. 您发出一个特殊事件。如果觉得第一种方式更通用，我更喜欢它。

存储 emitChange 并且您的视图捕获事件（以下示例：

componentDidMount: function() {
    MyStore.addChangeListener(address, this._onDeleteUser;
},

然后你的视图根据答案检查你在商店中填写的'message'字段，你可以渲染任何合适的东西。

我希望一切都清楚。这是商店的示例，以备不时之需。 https://facebook.github.io/flux/docs/todo-list.html#creating-stores

要恢复，除了在商店中进行 ajax 调用外，您的方法很好。不要那样做真的很糟糕。希望对你有帮助

在 React.js 应用程序中，API 调用在商店中失败，我如何将其传回视图？

In a React.js app, an API calls fails in the store, how do I transmit that back to the view?

javascript

store

view

flux

reactjs