聆听商店外的 Reflux 动作

Question

我正在尝试弄清楚如何使 ajax 调用适合 flux/reflux 做事方式。从我在网上发现的 info 的碎片中，将 API 逻辑与商店分开似乎是正确的。

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

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

Answer 1

商店是您的操作与 API 之间的粘合剂。就像

中的回答一样

您的情况的不同之处在于您不直接在商店中执行 ajax 请求，而是通过 API-class，用从您的 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);
  }
});

在 api 调用 returns 之前，我不会更新我的商店和 this.trigger()。

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

// 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 不是数据流的一部分：

Action->Store->Component->Action等

聆听商店外的 Reflux 动作

Listen to Reflux actions outside of stores

javascript

reactjs

eventemitter

flux

refluxjs