Angular2 State Machineであなたの州の王様になりましょう

アプリケーションの状態を管理することは、多くのアプリケーションにとって興味深い非常に重要なタスクです。 結局のところ、それはユーザーインターフェースがどの程度わかりやすく健全に構築されるか、そしてアプリケーション自体がどれだけ成功するかにかかっています。



今日は、Angular2でアプリケーションを作成または書き換えることを決定し、彼のために状態管理ロジックを再度書き換えるかどうか、または何かを探す必要があるかどうかを検討する人々のために、州との作業を促進できる興味深いオープンソースプロジェクトについてお話したいと思いますこれらのあなたのインターネットのオープンスペース。

Angular2ステートマシン

angle2-state-machineはポートであり、いくつかの適応的な変更があり、Angular2のjavascript-state-machineは 、何らかの方法で状態を処理するアプリケーションのng2への移行を簡素化します。



現時点では、事実上、ng2アプリケーションの標準であるTypeScriptバージョンがあります。



ライブラリ自体はシンプルで小さく、参加は大歓迎です。npmの最初のリリースは最近リリースされました。

少しのコード

ライブラリをインストールします。

npm i angular2-state-machine --save
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さらに、空の場合でもapp.component.tsを使用して既にng2アプリケーションが動作しているという事実から進みます。



通常の信号機の例として、ライブラリの機能を検討します。



ライブラリの使用を開始する前に、モジュールをインポートし、すべての状態と遷移を含む状態マシン自体を作成し、初期状態を設定する必要があります。

 import {StateMachine, StateEvent} from './core'; let fsm = new StateMachine({ initial: 'green', events: [ new StateEvent({ name: 'toGreen', from: ['yellow'], to: 'green' }), new StateEvent({ name: 'toRed', from: ['yellow'], to: 'red' }), new StateEvent({ name: 'toYellow', from: ['red', 'green'], to: 'yellow' }) ] });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、緑、黄、赤の3つの信号状態に基づいてステートマシンを作成し、これらの状態自体への遷移の名前「toGreen」、「toYellow」、「toRed」を付けました。



一意のイベント名のみを使用する必要があります。そうしないと、サービスは初期化段階で「すべてのイベントに一意の名前を使用する必要があります」というエラーをスローします。



先に進む前に、StateMachineとStateEventについて簡単に説明する必要があります。



StateMachineは、実際にはサービス自体であり、状態から状態への移行を処理します。



StateEventは、状態マシンの遷移を記述する型付きイベントです。



アプリケーションが青信号で起動するとします。 しばらくすると、黄色が始まります。 信号機の状態を変更するには、以下を実行する必要があります。

 fsm.fireAction('toYellow'); //   -  
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

現在のステータスも確認できます。

 fsm.getCurrent() // yellow
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ステートマシンの規模が印象的で、ある時点で別の現在の状態から別の特定の状態に切り替えることができるかどうかを確認したい場合は、次の操作を実行できます。

 fsm.can('toYellow') // Error 'You cannot switch to this state'
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

説明した例では、黄色のライトは既にオンになっているため、黄色のライトに切り替えることはできません。



ファンには逆の方法があります：

 fsm.cannot('toYellow') // true
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、指定された状態マシンの利用可能なすべてのイベントを見つけることができます。

 fsm.getEvents() /* [StateEvent({ name: 'toGreen', from: ['yellow'], to: 'green' }), StateEvent({ name: 'toRed', from: ['yellow'], to: 'red' }), StateEvent({ name: 'toYellow', from: ['red', 'green'], to: 'yellow' }) ]*/
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

または、トランジションが利用可能なイベントの現在の名前を見つけます：

 fsm.getTransitions() // 'toYellow'
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ステップに戻る必要がある場合：

 fsm.goToPreviousState() // 'green'
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そのため、簡単でシンプルです。アプリケーションの状態を管理でき、すべてをゼロから書き直す必要はありません。