2 ms·
I've used Flux now on a few toy microprojects and I found that while Flux's unidirectional data flow is initially appealing (and I naturally tend to write unidi
by nogridbag 12y ago
I've used Flux now on a few toy microprojects and I found that while Flux's unidirectional data flow is initially appealing (and I naturally tend to write unidirectional code for very complex UIs in past apps),it makes the simple cases much more tedious and error prone.
For example, given the simplest case of a Flux store handling events from a single ajax call, I find I have to write code like this:
onLoad() {
this.loading = true;
this.errorMsg = null;
this.data = null;
this.condition1 = null;
this.condition2 = null;
this.something = null;
}
onSuccess(data) {
this.loading = false;
this.errorMsg = null;
this.data = data;
this.condition1 = data.blah === 'Hello';
this.condition2 = data.blah2 === 'World';
this.something = data.something;
}
onFailure(errorMsg) {
this.loading = false;
this.errorMsg = errorMsg;
this.data = null;
this.condition1 = null;
this.condition2 = null;
this.something = null;
}
If for some reason I was feeling crazy and I wanted the store to handle a second Ajax call, the store code becomes much more cumbersome so I avoid this.
Even with some of the slicker Flux implementations, I still have tons more boilerplate than a traditional MVC app which for the simple UIs makes the code more difficult to reason about. For example, I find that in my store, I frequently forget to "reset" some property thus making the state "invalid". I've come up with this type of pattern, but it just feels... odd:
resetInitialState() {
this.loading = false;
this.errorMsg = null;
this.data = null;
this.condition1 = null;
this.condition2 = null;
this.something = null;
}
onFailure(errorMsg) {
this.resetInitialState();
this.errorMsg = errorMsg;
}
- balls187 12y ago> I still have tons more boilerplate than a traditional MVC app which for the simple UIs makes the code more difficult to reason about. I think this is just the relative immaturity of the ReactJS/Flux stack, and having to do this boilerplate is just part of the cost of being bleeding edge (much like struggling with understanding Transclusion/Directives/et-al when Angular was first released with crappy documentation).