javascript - 套接字在Flux单向数据流中的适合位置是什么？

Question

套接字在Flux单向数据流中的适合位置是什么？我已经阅读了两种关于远程数据应进入Flux单向数据流的思路。我看到的是获取Flux应用程序的远程数据的方式是在进行服务器端调用时，例如，在一个 promise 中，然后将其解决或拒绝。在此过程中可能会触发三种可能的操作:

乐观更新 View (FooActions.BAR)

的初始操作

解决异步 promise 时的成功操作(FooActions.BAR_SUCCESS)

异步 promise 被拒绝时的错误操作(FooActions.BAR_ERROR)

商店将监听 Action 并更新必要的数据。我已经看到了 Action 创建者和商店内部发出的服务器端调用。我将 Action 创建者用于上述过程，但是不确定通过Web套接字获取数据是否应进行类似处理。我想知道 socket 在下面的图表中的位置。

Answer 1

在将Flux与WebSocket或普通的旧HTTP请求/轮询一起使用时，实际上没有任何区别。您的商店负责在应用程序状态更改时发出更改事件，并且如果该更改来自UI交互，WebSocket或发出HTTP请求，则不应从商店外部看到该事件。这实际上是Flux的主要优点之一，因为无论在何处更改应用程序状态，它都会通过相同的代码路径。

一些Flux实现倾向于使用 Action / Action 创建者来获取数据，但是我并不完全同意。

操作是发生的事情，它们会修改您的应用程序状态。诸如“用户更改了一些文本并点击保存”或“用户删除了项目”之类的东西。可以将操作想像成数据库的事务日志。如果您丢失了数据库，但是保存并序列化了所有曾经发生的操作，则可以仅重播所有这些操作并最终获得与丢失的状态/数据库相同的状态。

因此，诸如“给我ID为X的项目”和“给我所有项目”之类的不是行动，而是问题，是关于该应用程序状态的问题。在我看来，应该是商店通过您在这些商店中公开的方法来回答这些问题。

使用 Action / Action 创建者进行获取是很诱人的，因为获取需要异步。通过将异步内容包装在操作中，您的组件和存储可以完全同步。但是，如果这样做，则会模糊 Action 的定义，并迫使您假设您可以将整个应用程序状态放入内存(因为只有在内存中有答案的情况下，您才可以同步响应)。

因此，这就是我如何看待助焊剂和不同概念的方法。

存储

这显然是您的应用程序状态所在的地方。商店封装并管理状态，并且是该状态发生突变的唯一位置。当状态改变时，它也是发出事件的地方。

商店还负责与后端进行通信。当状态更改并且需要与服务器同步时，存储与后端进行通信，并且在需要内存中没有的数据时，也与服务器进行通信。它具有get(id)，search(parameters)等方法。这些方法用于您的问题，即使状态可以放入内存中，它们也都返回promise。这很重要，因为您可能会遇到用例，该用例的状态不再适合内存，或者无法在内存中进行过滤或进行高级搜索。通过从问题方法返回 promise ，您可以在从内存返回或询问后端之间进行切换，而不必在商店外进行任何更改。

操作

我的 Action 非常轻巧，他们对持久化封装的突变一无所知。它们只是承载从组件到商店的变异的意图。对于较大的应用程序，它们可以包含一些逻辑，但不能包含服务器通信之类的东西。

组件

这些是您的React组件。他们通过在商店上调用问题方法并呈现这些方法的返回值来与商店进行交互。他们还订阅商店公开的change事件。我喜欢使用高阶组件，这些组件只是包装另一个组件并将 Prop 传递给它。一个例子是:

var TodoItemsComponent = React.createClass({
  getInitialState: function () {
    return {
      todoItems: null
    }
  },
  componentDidMount: function () {
    var self = this;
    TodoStore.getAll().then(function (todoItems) {
      self.setState({todoItems: todoItems});
    });

    TodoStore.onChange(function (todoItems) {
      self.setState({todoItems: todoItems});
    });
  },
  render: function () {
    if (this.state.todoItems) {
      return <TodoListComponent todoItems={this.state.todoItems} />;
    } else {
      return <Spinner />;
    }
  }
});

var TodoListComponent = React.createClass({
  createNewTodo: function () {
    TodoActions.createNew({
      text: 'A new todo!'
    });
  },
  render: function () {
    return (
      <ul>
        {this.props.todoItems.map(function (todo) {
          return <li>{todo.text}</li>;
        })}
      </ul>
      <button onClick={this.createNewTodo}>Create new todo</button>
    );
  }
});

在此示例中， TodoItemsComponent是更高阶的组件，它包装了与商店进行通信的细节。提取待办事项后，它会渲染 TodoListComponent，并在此之前渲染一个微调框。由于它会将待办事项作为 TodoListComponent的 Prop 传递，因此该组件仅需专注于渲染，并且只要商店中发生任何更改，它都将被重新渲染。渲染组件保持完全同步。另一个好处是 TodoItemsComponent只专注于获取数据并将其传递，从而使其可用于需要待办事项的任何渲染组件。

高阶组件

术语“高阶组件”来自术语“高阶函数”。高阶函数是返回其他函数的函数。因此，高阶组件是只包装另一个组件并返回其输出的组件。