redux
integration with polymer and vue , as well as the description of the basics of redux itself, so I do not want to reveal this topic in the article.
An object describing what happened.
polymer
when redux
with redux
duck is a one-way binding .
<input value="[[propFromReduxStore]]" on-change="changeText"></input>
changeInput: function(e) { this.dispatch("setText", e.currentTarget.value); }
change
event, the action dispatcher and after that the modified value falls into propFromReduxStore
and the control is re-rendered with a new value.
vue
slightly different situation, 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
elements as a template.
redux
principle described above. And in order to avoid a non-consistent situation, when the control has already been re-rendered due to its internal state, and the model model has not yet changed through action
and does not correspond to this view, it is necessary to take additional actions to block the direct change of 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
event, and if there is, then we will know about its occurrence after the fact, not to mention its surrender, but there is a native modifier that allows access to all possible native events . There is also a stop
and prevent
modifier , which even allows us not to write e.stopPropagation () and e.preventDefault () , as was the case with the polymer
. A little, but nice.
React
did not consider, because in practice it did not use, except for jsx
templates in vue
, but this is absolutely not the case. But still, as far as I heard from colleagues, there are no such problems, in view of the internal architecture of event handling.Source: https://habr.com/ru/post/337564/