Question

嗨我是新手反应，我在ajax post请求后有更新应用程序状态的问题。例如，我的州看起来像这样：

state: {
   persons: []
}

然后我想将新人添加到州，所以我向serwer提取请求，并且有一个问题。我应该从服务器更新集合返回设置新状态，还是应该返回响应并在请求回调强制新请求到服务器获取数据？或者还有其他选项，比如监听器会在状态为ok的任何响应后更新状态吗？

Answer 1

您可以在ajax调用的成功函数中直接setState。

    var self = this;
    $.ajax({
        type: 'GET',
        url: "http://localhost:9000/abc",
        dataType: 'json',
        success: function(data) {
            self.setState({persons: data});
        },
        error: function(jqXHR,textStatus,errorThrown) {
            console.log(textStatus);
        }
    });

我一直在我的项目中使用这种方法，它就像一个魅力。

Answer 2

我认为这取决于我的两件事：

您是否需要在网络带宽和延迟方面超级高效？
您是否已经有方法来执行ajax GET请求并更新状态？

如果对1.的答案为YES，那么您需要从POST和更新状态获取响应中的数据。

如果1.的答案为NO，但2.的答案为YES，那么只需触发另一个ajax请求。

如果对两者的答案都是“否”，那么我会选择代码中看起来更干净的东西。

另一个想法是，您是否需要经常轮询列表？在这种情况下，您应该使用您已经用于轮询的相同方法。

Answer 3

您的Redux操作创建者将从服务器获取数据。你可能会从fetch库中获得一个承诺（Axios，同构提取，......）。

然后您必须使用商店中间件来处理异步操作：您可以使用Redux-Promise或Redux-Thunk来捕获Promise或dispatch函数而不是纯字符串操作。中间件允许您在数据可用时（或出错时）发送简单操作。

当您的数据可用且中间件调用您的操作时，您的Reducer将创建新状态，从操作有效负载中获取人员数组。

我建议您阅读Redux文档的这一部分： http://redux.js.org/docs/advanced/AsyncActions.html

异步操作和中间件是Redux的难点之一，但是当您了解中间件如何工作时，它并不复杂，您只需要花一些时间阅读Redux文档。

祝你有愉快的一天，利玛

React - 在ajax post请求后更新状态的方法

3 个答案: