PolymerおよびVueでReduxを使用する詳細

以前の記事で書いたように、私はreduxと一緒にポリマーとvueの両方を使用しました。 したがって、これらのライブラリでreduxを使用する際の詳細に関連する経験を共有したいと思います。 これらのライブラリのコンポーネントの形式で、最も単純なアトミックコントロール（ネイティブ（入力、チェックボックス）およびラップ）について検討します。



この記事では、 ポリマーとvueとのredux



統合のセットアップの説明、およびredux自体の基本の説明は省略しているため、このトピックについて詳しく説明したいと思います。

0.はじめに

最初に、 reduxの基本原則の1つを思い出してください。

状態を変更する唯一の方法は、何が起こったかを説明するオブジェクトであるアクションを発行することです。

これに基づいて、状態を直接変更できないことは明らかであり、必要なイベントが発生した後にアクションをディスパッチすることによってのみこれを行うことができます。



概略的には、これは次のように表すことができます。



ご覧のとおり、一方向のデータストリームがあります。

1.ネイティブコントロール

ポリマー

redux



duckと共に使用する場合のpolymer



非常に便利なことは、 一方向の結合です。



テンプレート ：

 <input value="[[propFromReduxStore]]" on-change="changeText"></input>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

jsコード ：

 changeInput: function(e) { this.dispatch("setText", e.currentTarget.value); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

したがって、すべてがinputで標準であり、原則として標準ですpropFromReduxStore



イベントでは、 アクションがディスパッチされ、その後、変更された値はpropFromReduxStore



分類され、コントロールはすでに新しい値でレンダリングされます。

ヴュー

C vue



わずかに異なる状況です; polymer



ような一方向の結合はありません 。 ただし、 同期修飾子を使用して同様の機能を実現できます



UPD： ヒントについてmayorovpに感謝します。実際、.syncは必要ありません。 バインディングについて：v-modelは双方向バインディングを提供しますが、値：一方向です。 したがって、以下の例では.syncは必要ありません。

テンプレート ：

 <input :value="propFromReduxStore" @change="changeText"></input>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

jsコード ：

 changeInput: function(e) { this.actionsRedux("setText", e.currentTarget.value); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

残りは、 polymer



を使用したバージョンと同じです。

2.コンポーネント

これは、テンプレートの形式でhtml



要素のレイアウトに「ラップ」された一連のメソッド、イベントであるため、コンポーネントではより複雑です。



コンポーネントの操作の概略図：



コンポーネントのイベントについて見ると、事実の後にすべてについてすでに学習しています。これは、上記のredux



原則と矛盾しています。 また、矛盾した状況を避けるために、コントロールが内部状態を考慮して既にレンダリングされており、ピン留めされたモデルがaction



によってまだ変更されておらず、この表現に対応していない場合、状態の直接的な変更をブロックする追加のアクションを実行する必要があります。

ポリマー

例としてpaper-checkboxコンポーネントを使用する



テンプレート ：

 <paper-checkbox checked="[[propFromReduxStore]]" on-tap="changeCheck"></paper-checkbox>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

jsコード ：

 changeCheck: function(e) { //     // bubbling ,        e.stopPropagation(); this.dispatch("setChecked", !this.propFromReduxStore); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ヴュー

例としてel-checkboxコンポーネントを使用する



テンプレート ：



UPD：以下のコードは、ネイティブイベントによるアプローチ自体を強調していますが、特定のコントロール（その内部アーキテクチャを意味する）には3つのオプションがあります。

 <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>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

jsコード ：

 changeCheck: function() { this.actionsRedux("setChecked", !this.propFromReduxStore); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コンポーネントにはclick



イベントさえない場合がありclick



が、存在する場合は、そのスポイリングは言うまでもなく、事後の発生について学習しますが、すべての可能なネイティブイベントにアクセスできるネイティブ修飾子があります 。 polymer



の場合のように、e.stopPropagation（） およびe.preventDefault（）を記述しないこともできるstop



およびprevent



修飾子もあります。 少しですが、いいです。

要点は、必要に応じて、コンポーネントのネイティブイベントにアクセスし、それらを完全に抑制し、必要なパスに沿ってデータワークフローを開始できることです。



React



は、 vue



jsx



テンプレートを除いて実際には使用しなかったため、考慮しませんでしたが、これは完全に間違っています。 しかし、同僚から聞いた限りでは、イベント処理の内部アーキテクチャを考慮すると、そのような問題はありません。