Où les processus de longue durée vivent-ils dans une application React + Redux?

Question

Où devrait à long processus en cours d'exécution « en direct » dans une application + réagissez Redux?

Pour un exemple simple, considérons une classe qui envoie et reçoit des messages sur une websocket:

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

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

Comment le cycle de vie de cette classe être gérés?

Mon premier instinct est de le garder sur le 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; 
    } 
} 

Mais, en dehors d'être un peu bizarre, il y a aussi aucun moyen pour le WebsocketStreamer d'avoir accès à la fonction dispatch(), et il casse chaud rechargement.

Une autre solution possible est de le garder dans un endroit global:

const streamer = new WebsocketStreamer(); 

Mais cela a des implications évidentes de testabilité, et les pauses rechargeant chaud aussi.

Alors, où un long processus en cours d'exécution en direct dans une application + réagissez Redux?

Note: Je me rends compte que cet exemple simple pourrait être construit avec seulement + magasins fournisseurs d'action. Mais je voudrais spécifiquement savoir où les processus de longue durée devraient exister dans des situations où ils existent.

Answer 1

que je fais quelque chose de similaire avec websockets. Dans mon cas, j'emballe simplement le client websocket dans un composant React qui rend null et l'injecte aussi près que possible de la racine.

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

Voici un exemple rapide. C'est assez naïf, mais c'est fini.

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

Note rapide: Le websocket ne vit pas dans le magasin. C'est simplement là et publie des actions.

EDIT: Je décidé d'explorer la mise du client (objet long terme) dans l'état global. Je dois dire que je suis fan de cette approche.

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

Answer 2

Dans mon expérience, il y a deux options. D'abord, vous pouvez passer le magasin à n'importe quel code non-Redux et répartir les actions d'ici. Je l'ai fait avec la connexion socket et tout allait bien. Deuxièmement, si vous avez besoin de socket ou de quoi que ce soit pour changer avec des actions de redux, cela semble être une bonne idée de mettre la connexion et la gestion dans un middleware personnalisé. Vous aurez accès à l'API de stockage et serez informé de toutes les actions de distribution, donc vous pourrez faire tout ce dont vous avez besoin.