2015-08-12 6 views
26

Dove dovrebbero "vivere" i processi a lungo termine in un'applicazione react + redux?Dove vivono i processi di lunga durata in un'applicazione React + Redux?

Per un semplice esempio, si consideri una classe che invia e riceve messaggi su una websocket:

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

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

Come deve il ciclo di vita di questa classe da gestire?

Il mio primo istinto è quello di mantenere sul store:

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; 
    } 
} 

Ma, oltre ad essere un po 'strano, c'è anche alcun modo per il WebsocketStreamer per ottenere l'accesso alla funzione dispatch(), e si rompe caldo ricaricare.

Un'altra possibile soluzione è quella di tenerlo in un qualche luogo globale:

const streamer = new WebsocketStreamer(); 

Ma che ha ovvie implicazioni testabilità, e rompe caldo ricaricare troppo.

Quindi, dove dovrebbe trascorrere un lungo processo in esecuzione in un'applicazione react + redux?

Nota: mi rendo conto che questo semplice esempio potrebbe essere creato con solo negozi + provider di azioni. Ma mi piacerebbe in particolare sapere dove i processi a lungo termine dovrebbero esistere nelle situazioni in cui esistono.

risposta

2

Sto facendo qualcosa di simile con websockets. Nel mio caso, avvolgo semplicemente il client websocket in un componente React che rende nullo e lo inserisce il più vicino possibile alla radice.

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

Ecco un breve esempio. È piuttosto ingenuo, ma le cose sono fatte.

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

nota rapida: Il websocket non vive nel negozio. È semplicemente lì e pubblica azioni.

MODIFICA: Ho deciso di esplorare l'impostazione del client (oggetto longevo) nello stato globale. Devo dire che sono un fan di questo approccio.

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

+0

Chris, ho scoperto che l'archiviazione del client Pusher nel negozio di redux causa molti problemi con il ricaricamento a caldo. Hai vissuto/superato questo? –

+1

Non posso parlarne, Steven. Non ho usato nulla di simile a questa passata fase di prova del concetto. –

20

Nella mia esperienza, ci sono due opzioni. Innanzitutto, puoi passare il negozio a qualsiasi codice non redux e inviare azioni da qui. L'ho fatto con la connessione socket e tutto andava bene. In secondo luogo, se hai bisogno di socket o di qualsiasi altra cosa con le azioni di redux, sembra una buona idea mettere la connessione e la sua gestione nel middleware personalizzato. Avrai accesso all'archivio API e sarai informato su tutte le operazioni di invio, quindi potresti fare tutto il necessario.

+13

Entrambe sono soluzioni valide. –

Problemi correlati