Reduxからイベントを受け渡すにはどうすればいいですか？

Question

私はGUIの反応/ reduxベースのアプリを持っています。ビューの一環として、点滅したい "インジケータ"反応コンポーネントがあり、点滅はCSS3アニメーション（アニメーションフレーム）で行われます。反応コンポーネントのメンバー関数indicator.blink()は、インジケータを点滅させるために呼び出されます（基本的には、点滅クラスをDOM要素から削除し、1ms後に追加します。ハックとして「再起動」APIがないことを回避します）。 CSS3アニメーションの場合）。

reduxフレームワーク（必要な場合はサンク）で特定のアクションが発生した場合、このblink()を反応ビューで機能させたいと思います。これを最もうまくいく方法は？

還元状態のアクションをアプリの状態に変更するのが正しいと感じていないので、インジケータ要素は実際には状態ではなく瞬間的なイベントであるため、状態変数の1つにpropとしてバインドします。しかし、反応成分を変化させるための還元作用を得る他の方法は知らない。

Answer 1

CSSトランジションは実装の詳細であり、コンポーネントにメソッドを公開しないとします。 （あなたは通常、とにかくべきではありません。）

はどのようにしか小道具によって駆動されることでしょうか？私はブール値の小道isBlinkingで想像しています。あなたが望むなら、これはあなたがRedux状態に保つことができるものです。数百ミリ秒後にSTART_BLINKとSTOP_BLINKを送信するアクションクリエイターがいる。

それとも、このためにReduxのを使用して回避し、親コンポーネントから命令的メソッドを呼び出すことができます。

Answer 2

何かが増えたときに表示するには、blinkのものを使用するとします。カウンターを状態に保ち、コンポーネントの内部状態を維持して前の値に保つことができます。変更すると、blinkと新しい値を保存します。言い換えれば

、あなたが気に状態の変化から、ご希望のイベント情報を導き出します。

はそれはそれが何のためにあるのかで、過渡的挙動のこの種のための内部状態を使用するように完全に罰金です。

Answer 3

CSSアニメーションに「再起動」はありませんが、繰り返し回数をinfiniteと指定することができます。これは、おそらくReductionを使わずに問題を解決するようですが、.blinkingクラスをオンまたはオフに切り替えるあなたはそれが点滅するかどうかを尋ねます。何かが増加した場合のための完璧な理にかなっている

@keyframes blink { 
    0% { opacity: 0; } 
    50% { opacity: 1} 
    100% { opacity: 0; } 
} 
.blinking{ 
    animation-name: blink; 
    animation-duration: 1s; 
    animation-iteration-count:infinite; 
}