Question

我正在试图弄清楚如何将ajax调用融入流量/回流的做事方式。从我在网上发现的info碎片中，将API逻辑与商店分开似乎是正确的。

从那里开始，我创建了一个向服务器发出请求的客户端API。现在我希望这些函数能够监听我的操作，然后发出请求，并在成功时触发其他操作，随后使用服务器中的新数据更新存储。

如何为我的API提供类似于回流createStore方法的东西？或者，我的服务器调用还有其他一些干净的方式来监听操作吗？

Answer 1

商店是您的行为和API之间的粘合剂。就像https://stackoverflow.com/a/27487312/274483

中的回答一样

您的情况不同之处在于您不是直接在商店中执行ajax请求，而是通过您的API类，使用API返回的数据填充商店并触发商店更新。

Answer 2

我的Api只是一个普通的旧javascript对象（POJO）。它在ES6中，但你应该明白这个想法：

import request from 'superagent';

// Other helpers functions and setup

let handle = (err) => {
  // error handling stuff
};

export default {
  create(user, cb) {
    return request
      .post(server + '/api/users/new')
      .send(user)
      .on('error', (err) => {
        handle(err);
        cb(err);
      })
      .end(cb);
  },
  login(user, cb) {
    // Post some more stuff
  }
};

然后，我在我的商店中这样称呼它：

import Reflux from 'reflux';

import UserActions from '../actions/UserActions';

import Api from '../api/UserApi';

const UserStore = Reflux.createStore({
  listenables: [UserActions],
  getInitialState() {
    // insert stuff
  },
  onCreate(user) {
    Api.create(user, (err, res) => {
      if (err) {
        console.log(err);
      } else {
        // Do something with res
        // this is for JSON, your API might be different
        let user = JSON.parse(res.text);
        this.update(user);
      }
    })
  },
  onLogin(user) {
    // login stuff
  },
  // More methods
  update(user) {
    this.currentUser = user;
    this.trigger(user);
  }
});

我不会更新我的商店和this.trigger()，直到api通话返回。

更聪明的想法可能是乐观地更新：

// inside the todo store
onCreate(todo) {
  Api.create(todo);
  this.update([todos].concat(this.todos));
},
update(todos) {
  this.todos = todos;
  this.trigger(todos);
}

显然，这是一种方法，但它肯定不是唯一的方法。

但是，主要的想法是商店使用API。

API不是以下数据流的一部分：

操作 - ＆gt;存储 - ＆gt;组件 - ＆gt;操作等。

聆听商店外的回流行动

2 个答案: