Uzun süreli süreçler bir React + Redux uygulamasında nerede yaşıyor? a + tepki Redux uygulamasında

Question

uzun çalışan gerektiğini süreçleri "canlı"?

class WebsocketStreamer { 
    sendMessage(message) { 
    this.socket.send(…); 
    } 

    onMessageReceive(event) { 
    this.dispatch({ 
     type: "STREAMER_RECV", 
     message: event.data, 
    }) 
    } 
} 

nasıl bu sınıfın yaşam döngüsü yönetilmelidir:

Basit bir örnek için

, bir WebSocket'e üzerinden mesaj gönderip alan bir sınıf düşünün?

Benim ilk içgüdüsü store üzerinde tutmaktır:

var stores = { 
    streamer: function(state={}, action) { 
    if (action.type == "@@INIT") 
     return { streamer: new WebsocketStreamer() } 
    if (action.type == "STREAMER_SEND") 
     state.streamer.sendMessage(action.message) 
    return state; 
    } 
} 

Ama kenara biraz garip olmaktan, orada da dispatch() işleve erişmek için WebsocketStreamer şekli değil ve sıcak tatili yeniden.

const streamer = new WebsocketStreamer(); 

Ama bariz test edilebilirlik etkileri vardır ve sıcak çok yeniden sonları:

başka potansiyel çözüm küresel bir yerde tutmak etmektir.

Peki nereden uzun süren bir süreç + a tepki Redux uygulamasında yaşamak gerekir?

Not: Bu basit örnek sadece depolar + eylem sağlayıcıları ile inşa edilebileceğini biliyoruz. Fakat özellikle uzun süredir yaşanmış süreçlerin var oldukları durumlarda bulunmasını bilmek istiyorum. Ben WebSockets ile benzer bir şey yapıyorum

Answer 1

. Benim durumumda, websocket istemcisini null yapan ve mümkün olduğunca root'a yakın olarak enjekte eden bir React bileşenine sardım.

<App> 
    <WebSocketClientThingy handlers={configuredHandlers}/> 
    .... 
</App> 

İşte hızlı bir örnek. Oldukça naif, ama işler bitti.

https://github.com/trbngr/react-example-pusher

Hızlı not: WebSocket deposunda yaşamaz. Sadece orada var ve eylemler yayınlıyor.

DÜZENLEME: Küresel duruma istemcisi (uzun ömürlü nesne) ayarını incelemeye karar verdi. Bu yaklaşımın hayranı olduğumu söylemeliyim. Tecrübelerime göre

https://github.com/trbngr/react-example-pusher/tree/client_as_state

Answer 2

, iki seçenek vardır. İlk olarak, mağazadan herhangi bir Redux koduna ve gönderim işlemlerine buradan geçebilirsiniz. Bunu soket bağlantısıyla yaptım ve her şey yolundaydı. İkincisi, yuvaya veya redux eylemleriyle değiştirmek istediğiniz her şeye ihtiyacınız varsa, bağlantıyı ve yönetimini özel katman yazılımlarında kullanmak iyi bir fikir gibi görünüyor. Depolama API'sine erişiminizin yanı sıra, tüm eylemler hakkında bilgilendirileceksiniz, böylece ihtiyacınız olan her şeyi yapabilirsiniz.