Как я уже писал в своих предыдущих статьях я работал и с polymer и с vue в связке с redux. Поэтому хотелось бы поделиться опытом, связанным со спецификой использования redux в данных библиотеках. Рассматривать будем на простейших атомарных контролах: нативных (input, checkbox) и обернутых, в виде компонентов данных библиотек.
В статье я опуская описание настройки интеграции redux
с polymer и vue, а так же описание азов самого redux, дабы не эту тему хочу раскрыть в статье.
The only way to change the state is to emit an action, an object describing what happened.
polymer
при связке с redux
дак это односторонний биндинг.<input value="[[propFromReduxStore]]" on-change="changeText"></input>
changeInput: function(e) {
this.dispatch("setText", e.currentTarget.value);
}
change
диспатчим action и после чего измененное значение попадает в propFromReduxStore
и контрол перерендерится уже с новым значением.vue
немного другая ситуация, polymer
<input :value.sync="propFromReduxStore" @change="changeText"></input>
<input :value="propFromReduxStore" @change="changeText"></input>
changeInput: function(e) {
this.actionsRedux("setText", e.currentTarget.value);
}
polymer
.html
-элементов в виде шаблона.redux
описанному выше. И что бы избежать неконсистентной ситуации, когда контрол уже перерендерился в виду своего внутреннего состояния, а прибинденная модель еще не поменялась через action
и не соответствует данному представлению необходимо производить дополнительные действия для блокировки прямого изменения state.<paper-checkbox checked="[[propFromReduxStore]]" on-tap="changeCheck"></paper-checkbox>
changeCheck: function(e) { //Здесь ловим клик по компоненту
//Предотвращаем bubbling события, что бы компонент сразу не перерендерил компонент
e.stopPropagation();
this.dispatch("setChecked", !this.propFromReduxStore);
}
<el-checkbox :value="checked" @change="changeCheck">
</el-checkbox>
<el-checkbox :value="checked" @click.prevent.stop.native="changeCheck">
</el-checkbox>
<el-checkbox v-model="checked" @click.prevent.stop.native="changeCheck">
</el-checkbox>
<el-checkbox v-model="propFromReduxStore" @click.stop.native="changeCheck" >
</el-checkbox>
changeCheck: function() {
this.actionsRedux("setChecked", !this.propFromReduxStore);
}
click
, а если и есть, то узнаем мы об его наступлении уже постфактум, не говоря уже об его подалении, но зато есть модификатор native, который позволяет получить доступ ко всем возможным нативным событиям. Так же есть модификатор stop
и prevent
, который даже позволит нам не писать e.stopPropagation() и e.preventDefault(), как это было с polymer
. Малость, а приятно.React
не рассмотрел, так как на практике его не использовал, если не считать jsx
-темплейтов в vue
, но это совершенно не то. Но все-таки, насколько я наслышен от коллег по цеху, там таких проблем нет, в виду внутренней архитектуры обработки событий.
К сожалению, не доступен сервер mySQL