How to handle persistence states in React / Flux?
I've been working with react / flux for a couple of weeks, and while I feel like I have a pretty good handle on everything from asynchronous loading to updating props / states / etc, one thing that still bothers me is how to handle save states.
For example, when loading data, I just have a boolean isLoading in my store that is passed to my components. But when I try to send the updated object to the server, it is trivial:
- start update action
- displays the status "Save in progress"
but figuring out the result of the update action seems more difficult.
Probably the most pertinent post I've seen on this is in the Fluxxor async data guide , but their solution (adding / changing status property on an object) feels prone to errors.
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 persistence states, or is it better to add a property to an object?
source to share
I recommend keeping your "model stores" and "ui stores" separate, or at least access through different cursor positions in the same store. So, in your case, you will have one store or branch for your "text model" and then another store or branch for the "word status".
While this adds some complexity in the form of decoupling logic between stores and reacts twice to action AddBuzz
, it does reduce (more) complexity by limiting updating the model store to true changes in model data and managing ui states separately.
EDIT
This is what Relay will do more or less by storing stored data in a separate self-managing vault, leaving custom stores with nothing but ui state. Some other libraries like https://github.com/Yomguithereal/baobab recommend this approach as well. The idea is that these are fundamentally different types of state. One is related to domain specific data and the other is specific to 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 highlight two change events, use one waitFor
other and only emit the change from the second.
source to share