Where do sockets fit into the Flux unidirectional data flow? I have read 2 schools of thought for where remote data should enter the Flux unidirectional data flow. The way I have seen remote data for a Flux app fetched is when a server-side call is made, for example, in a promise that is then resolved or rejected. Three possible actions could fire during this process:

1. An initial action for optimistically updating the view (FooActions.BAR)
2. A success action for when an asynchronous promise is resolved (FooActions.BAR_SUCCESS)
3. An error action for when an asynchronous promise is rejected (FooActions.BAR_ERROR)

The stores will listen for the actions and update the necessary data. I have seen the server-side calls made from both action creators and from within the stores themselves. I use action creators for the process described above, but I'm not sure if data fetching via a web socket should be treated similarly. I was wondering where sockets fit into the diagram below.

Where do sockets fit into the Flux unidirectional data flow? I have read 2 schools of thought for where remote data should enter the Flux unidirectional data flow. The way I have seen remote data for a Flux app fetched is when a server-side call is made, for example, in a promise that is then resolved or rejected. Three possible actions could fire during this process:

1. An initial action for optimistically updating the view (FooActions.BAR)
2. A success action for when an asynchronous promise is resolved (FooActions.BAR_SUCCESS)
3. An error action for when an asynchronous promise is rejected (FooActions.BAR_ERROR)

The stores will listen for the actions and update the necessary data. I have seen the server-side calls made from both action creators and from within the stores themselves. I use action creators for the process described above, but I'm not sure if data fetching via a web socket should be treated similarly. I was wondering where sockets fit into the diagram below.

• javascript
• websocket
• socket.io
• reactjs
• flux

• The diagram you have represents something that is self contained in client side (without a server). If you are looking for something that talks to a server then look at the diagram here github./facebook/flux – yangli-io Commented May 27, 2015 at 5:53
• possible duplicate of Should flux stores, or actions (or both) touch external services? – WiredPrairie Commented May 27, 2015 at 10:56
• If you're using websockets in an HTTP-like way (request/response), I would treat it almost exactly like an HTTP request. If data is constantly flowing into the websocket, I would have listeners on the websocket that push actions into the dispatcher when data is received. – Michelle Tilley Commented May 27, 2015 at 19:37

1 Answer 1

There's really no difference in how you use Flux with WebSockets or plain old HTTP requests/polling. Your stores are responsible for emitting a change event when the application state changes, and it shouldn't be visible from the outside of the store if that change came from a UI interaction, from a WebSocket, or from making an HTTP request. That's really one of the main benefits of Flux in that no matter where the application state was changed, it goes through the same code paths.

Some Flux implementations tend to use actions/action creators for fetching data, but I don't really agree with that.

Actions are things that happen that modifies your application state. It's things like "the user changed some text and hit save" or "the user deleted an item". Think of actions like the transaction log of a database. If you lost your database, but you saved and serialized all actions that ever happened, you could just replay all those actions and end up with the same state/database that you lost.

So things like "give me item with id X" and "give me all the items" aren't actions, they're questions, questions about that application state. And in my view, it's the stores that should respond to those questions via methods that you expose on those stores.

It's tempting to use actions/action creators for fetching because fetching needs to be async. And by wrapping the async stuff in actions, your ponents and stores can be pletely synchronous. But if you do that, you blur the definition of what an action is, and it also forces you to assume that you can fit your entire application state in memory (because you can only respond synchronously if you have the answer in memory).

So here's how I view Flux and the different concepts.

Stores

This is obviously where your application state lives. The store encapsulates and manages the state and is the only place where mutation of that state actually happens. It's also where events are emitted when that state changes.

The stores are also responsible for municating with the backend. The store municates with the backend when the state has changed and that needs to be synced with the server, and it also municates with the server when it needs data that it doesn't have in memory. It has methods like get(id), search(parameters) etc. Those methods are for your questions, and they all return promises, even if the state can fit into memory. That's important because you might end up with use cases where the state no longer fits in memory, or where it's not possible to filter in memory or do advanced searching. By returning promises from your question methods, you can switch between returning from memory or asking the backend without having to change anything outside of the store.

Actions

My actions are very lightweight, and they don't know anything about persisting the mutation that they encapsulate. They simply carry the intention to mutate from the ponent to the store. For larger applications, they can contain some logic, but never things like server munication.

Components

These are your React ponents. They interact with stores by calling the question methods on the stores and rendering the return value of those methods. They also subscribe to the change event that the store exposes. I like using higher order ponents which are ponents that just wrap another ponent and passes props to it. An example would be:

var TodoItemsComponent = React.createClass({
  getInitialState: function () {
    return {
      todoItems: null
    }
  },
  ponentDidMount: 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>
    );
  }
});

In this example the TodoItemsComponent is the higher order ponent and it wraps the nitty-gritty details of municating with the store. It renders the TodoListComponent when it has fetched the todos, and renders a spinner before that. Since it passes the todo items as props to TodoListComponent that ponent only has to focus on rendering, and it will be re-rendered as soon as anything changes in the store. And the rendering ponent is kept pletely synchronous. Another benefit is that TodoItemsComponent is only focused on fetching data and passing it on, making it very reusable for any rendering ponent that needs the todos.

higher order ponents

The term higher order ponents es from the term higher order functions. Higher order functions are functions that return other functions. So a higher order ponent is a ponent that just wraps another ponent and returns its output.