javascript - 聆听商店外的 Reflux 行动

Question

我试图弄清楚如何将 ajax 调用融入到通量/回流的做事方式中。从我在网上找到的一些信息来看，将 API 逻辑与商店分开似乎是正确的。

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

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

Answer 1

商店是您的操作和 API 之间的粘合剂。就像在https://stackoverflow.com/a/27487312/274483中回答的那样

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

Answer 2

我的 Api 只是一个普通的旧 javascript 对象（PO​​JO），就像这样。它在 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);
}

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

但是，主要思想是 Store 使用 API。

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

动作->存储->组件->动作等。