Come passare l'evento da Redux a Reagire?

Question

Ho un'app di GUI basata su react/redux. Come parte della vista c'è un "indicatore" che reagisce alla componente che vorrei lampeggiare, e il lampeggio è fatto con un'animazione CSS3 (frame di animazione). La funzione membro indicator.blink() del componente react viene richiamata per far lampeggiare l'indicatore (in pratica rimuove la classe blink dall'elemento DOM, quindi la aggiunge nuovamente 1ms più tardi, come un trucco per aggirare il fatto che non vi è alcuna "riavvio" api per un'animazione CSS3).

In determinate azioni che si verificano nel framework di ridiffusione (possono essere dei thunk se necessario), desidero chiamare questa funzione blink() nella vista di risposta. Il modo migliore per farlo?

E non mi sembra giusto per avere l'azione Redux modificare lo stato applicazione, quindi l'indicatore di elemento si legano ad una delle variabili di stato come prop, dato che non è in realtà uno stato, ma un evento istantaneo. Ma non conosco altro modo per ottenere un'azione di ridondanza per cambiare un componente che reagisce.

Answer 1

Immaginare le transizioni CSS sono dettagli di implementazione e non si espongono i metodi sui componenti. (Di solito non dovresti comunque.)

Come sarebbe guidato solo dai puntelli? Immagino da un puntello booleano isBlinking. Questo è ciò che puoi mantenere in stato Redux se lo desideri. Avere un creatore di azioni che invia START_BLINK e STOP_BLINK dopo alcuni millisecondi.

Oppure è possibile evitare l'utilizzo di Redux per questo e chiamare imperativamente il metodo dal componente principale.

Answer 2

Supponiamo di voler usare la cosa blink da mostrare quando qualcosa aumenta, puoi semplicemente tenere un contatore nel tuo stato e nello stato interno del tuo componente mantenere il valore precedente. Quando cambia, blink e salva il nuovo valore.

In altre parole, ricava le informazioni sull'evento desiderate dai cambiamenti di stato che ti interessano.

È assolutamente corretto utilizzare lo stato interno per questo tipo di comportamento transitorio, ovvero a cosa serve.

Answer 3

Non c'è "riavvio" nell'animazione CSS, ma è possibile specificare il conteggio di iterazione per infinite, che sembra risolvere il problema senza coinvolgere Redux, tranne che attivare o disattivare la classe .blinking a seconda di di voi volete che lampeggi o no.

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