Fișă de referință StimulusReflex

Concepte Fundamentale

StimulusReflex permite interfețe de utilizator reactive în timp real în aplicațiile Rails utilizând WebSockets (ActionCable) și CableReady.

Reflex de bază

<!-- view.html.erb -->
<button data-reflex="click->Counter#increment">Increment</button>

# app/reflexes/counter_reflex.rb
class CounterReflex < ApplicationReflex
  def increment
    @count = element.dataset[:count].to_i + 1
  end
end

Moduri Morph

Page Morph (Implicit)

Randează din nou întreaga pagină prin controller și aplică diferențele în DOM.

Selector Morph

# app/reflexes/example_reflex.rb
class ExampleReflex < ApplicationReflex
  def update_metric
    morph "#metric-display", render(partial: "metrics/metric", locals: { value: 42 })
  end
end

Nothing Morph

Execută logica de server fără a actualiza DOM-ul clientului.

class ExampleReflex < ApplicationReflex
  def background_task
    LongRunningJob.perform_later
    morph :nothing
  end
end

Metode de ciclu de viață

Callback-uri de server

class ExampleReflex < ApplicationReflex
  before_reflex :authenticate
  around_reflex :measure_time
  after_reflex :log_activity
end

Callback-uri generice de client

beforeReflex(element, reflex, noop, reflexId): Înainte de trimiterea cererii WebSocket
reflexSuccess(element, reflex, noop, reflexId): După execuția reflex și actualizarea DOM-ului
reflexError(element, reflex, error, reflexId): Când serverul aruncă o eroare netratată
reflexHalted(element, reflex, noop, reflexId): Când reflexul este anulat cu throw :abort
afterReflex(element, reflex, noop, reflexId): Executat atât la succes cât și la eșec
finalizeReflex(element, reflex, noop, reflexId): Hook final de curățare

Evenimente DOM

stimulus-reflex:before
stimulus-reflex:success
stimulus-reflex:error
stimulus-reflex:halted
stimulus-reflex:after
stimulus-reflex:connected
stimulus-reflex:disconnected
stimulus-reflex:ready

Tipare practice

Gestionarea formularelor

Reflexurile declanșate pe formulare serializează automat câmpurile în params.

Înlănțuirea promisiunilor (Promises)

this.stimulate('Comments#create')
  .then(() => this.showSuccess())
  .catch((err) => this.handleError(err))

Elemente permanente

Marcați elementele cu data-reflex-permanent pentru a fi păstrate neschimbate la morph-uri de pagină completă.

<div data-reflex-permanent>
  <video id="player" src="video.mp4" controls></video>
</div>

Referințe

Documentație StimulusReflex