Verwendung von socket.io mit Redux

Question

Dies ist das erste Mal, dass ich socket.io in der Produktion verwenden werde. Ich benutze React + Redux. Ich habe vor kurzem socket.io mit Redux integriert und es funktioniert gut, aber ich bin mir nicht sicher, ob es der beste Weg wäre, wie ich es gemacht habe. Da ich keine richtige Implementierung von socket.io mit redux gefunden habe, brauche ich Hilfe/Vorschläge, um sie zu verbessern.

für den Anfang Also, ich habe Setup einen Service für Steckdosen auf der ganzen App zu verwalten:

Socket.js

import isEmpty from 'lodash/isEmpty'; 
import io from 'socket.io-client'; 
import storage from '../storage'; 

/* eslint-disable no-use-before-define */ 

const Socket = { 
    connect, 
    emit, 
    on, 
    removeListener, 
    socket: null 
}; 

/* eslint-enable no-use-before-define */ 

function connect() { 
    const hasAuthenticated = !isEmpty(storage.get('user')); 
    if (hasAuthenticated) { 
    // Setup a server for testing. 
    Socket.socket = io.connect('http://localhost:3000', { reconnect: true }); 
    } 
} 

connect(); 

function on(eventName, callback) { 
    if (Socket.socket) { 
    Socket.socket.on(eventName, data => { 
     callback(data); 
    }); 
    } 
} 

function emit(eventName, data) { 
    if (Socket.socket) { 
    Socket.socket.emit(eventName, data); 
    } 
} 

function removeListener(eventName) { 
    if (Socket.socket) { 
    Socket.socket.removeListener(eventName); 
    } 
} 

export default Socket; 

Ich habe nur mit einer einzigen Seite, aber natürlich gibt wird mehr Seiten sein. Meine redux Komposition für diese Seite lautet:

Dashboard.jsx

componentWillMount() { 
    this.props.alertViolations(); // Action 
    } 

    componentWillUnmount() { 
    this.props.unsubscribeViolations(); // Action 
    } 

Actions.js

export function alertViolations() { 
    return dispatch => { 
    Socket.on('violations', violation => { 
     dispatch(actions.updateViolations(violation)); 
    }); 
    }; 
} 

export function unsubscribeViolations() { 
    Socket.removeListener('violations'); 
    return dispatch => { 
    dispatch(actions.removeViolationsListener()); 
    }; 
} 

Seine adaequat. Beim Unmount hört es auf, die emit-Funktion zu hören, die ich auf dem Server habe. Ich würde wirklich schätzen, wenn ich ein paar Anregungen bekommen könnte:

• Brauche ich eine Middleware-Setup-Buchsen in einer besseren und abstrakten Art und Weise verwalten?
• Gibt es eine bessere Möglichkeit, Sockets mit Redux zu verwalten?
• Wie kann ich die eingebauten Funktionen connect und disconnect Funktionen nutzen?
• Die Art und Weise, die ich behandelt habe, um nur die Verbindung zu erstellen, wenn der Benutzer eine Authentifizierung hat, ist das in Ordnung? Oder könnte es auch einen besseren Weg geben, damit umzugehen?
• Oh und auch, wenn ich die Verbindung beim Abmelden entfernen möchte? Müsste ich nur die Listener von allen Methoden entfernen oder kann ich die Trennfunktion bei Abmeldeaktionen verwenden?

Vielen Dank. Bitte lassen Sie mich wissen, wenn ich etwas in der Erklärung verpasst habe.

Answer 1

Middleware ist der häufigste Ort für eine permanente Verbindung wie ein Websocket in einer Redux-App. Es gibt bereits eine gute Anzahl bestehender Redux + Websocket-Integrationsbibliotheken - siehe meine Liste unter https://github.com/markerikson/redux-ecosystem-links/blob/master/middleware.md#sockets-and-adapters. Sie können einige davon unverändert verwenden oder sie als Beispiele für Ihre eigene Implementierung verwenden.