How to handle save states in React/Flux?

Question

I've been working with react/flux for a few weeks now and while I feel like I've got a pretty good handle on everything from async loading to updating props/states/etc, one thing that is still bothering me is how to handle save states.

For example, when loading data, I just have an isLoading boolean parameter in my store that gets passed to my components. But when I try and post an updated object to the server, it's trivial to:

fire the update action
display a "save in progress" state

but figuring out the result of the update action seems to be way more difficult.

Probably the most applicable post I've seen on this is in Fluxxor's async data guide, but their solution (adding/modifying a status property on the object) feels error-prone to me.

  onAddBuzz: function(payload) {
    var word = {id: payload.id, word: payload.word, status: "ADDING"};
    this.words[payload.id] = word;
    this.emit("change");
  },

  onAddBuzzSuccess: function(payload) {
    this.words[payload.id].status = "OK";
    this.emit("change");
  },

  onAddBuzzFail: function(payload) {
    this.words[payload.id].status = "ERROR";
    this.words[payload.id].error = payload.error;
    this.emit("change");
  }

Is there a better way to manage save states or is adding a status property to the object the best way?

glortho · Accepted Answer · 2015-05-27T14:52:41.057

I recommend keeping your "model stores" and "ui stores" separate, or at least accessed via different cursor positions in the same store. So, in your case you'd have one store or branch for your "word model" and then another store or branch for "word status."

While this adds some complexity in the form of breaking up logic across stores and reacting twice to the AddBuzz action, it ends up reducing (more) complexity by confining model store updates to true changes in model data and managing ui states separately.

EDIT

This is what Relay will more-or-less be doing, keeping persisted data in a separate self-managed store, leaving custom stores for nothing but ui state. Some other libraries like https://github.com/Yomguithereal/baobab also recommend this approach. The idea is that these are fundamentally different kinds of state. One is domain-specific persisted data and the other is ui-specific ephemeral application state.

It might look something like this:

model_store.js:

onAddBuzz: function(payload) {
  var word = {id: payload.id, word: payload.word};
  this.words[payload.id] = word;
  this.emit("change");
}

ui_store.js:

onAddBuzz: function(payload) {
  this.wordStates[payload.id] = 'ADDING';
  this.emit("change");
}

my_view_controller.js:

  // listen to both stores and pass down both words and wordStates to your views

my_word_view.js:

...

render: function() {
  var word = this.props.word,
      wordState = this.props.wordState;

  ...
}

If you don't want to emit two change events, have one waitFor the other and emit the change only from the second one.

Do you know if there's any good, detailed blogs/examples of keeping your "model stores" & "ui stores" separate? It's still kind of an ambiguous concept to me. Seeing a real example (at least of the two stores & a corresponding component) would be quite helpful. — Andrew Cross, May 27 '15 at 14:31
Your example helped a lot, thank you. This seems like a more robust way of dealing with it all. I'm going to start messing around with this style and see how it goes. — Andrew Cross, May 27 '15 at 15:26
Okay good luck @AndrewCross! Happy to answer more questions if you need. We have a Flux/React application in production that is organized this way and it has been mostly great. There is an occasional irritation coordinating stores/branches but the simplicity of leaving model stores alone has been worth it. — glortho, May 27 '15 at 17:46

How to handle save states in React/Flux?

1 Answers1